CSS构建亚克力和磨砂玻璃效果

最近在一些设计教程中，接触到关于微软Fluent设计系统中的亚克力效果（Acrylic Material）以及Mac OS中的磨砂玻璃效果（Frosted Glass）。这些效果引人注目，并被广泛应用在现代UI设计中。今天我们来讨论如何用CSS实现这些设计效果。

发展历程

磨砂玻璃效果（Frosted Glass）：iOS系统于2013年首次引入这种背景模糊效果，之后微软Windows 10的Fluent设计系统进一步扩展了这种半透明模糊的视觉体验。
亚克力效果（Acrylic Material）：微软在Fluent设计系统中将其命名为亚克力效果，增强了背景的模糊度和层次感，使界面更加有层次和质感。
Neumorphism和Glassmorphism：这两种UI风格近年来成为热门设计趋势，其中Glassmorphism因其透明和多层次的效果引人注目。

实现磨砂玻璃效果

为了实现磨砂玻璃效果，首先我们需要三个层次：

背景层
模糊层
内容层

我们可以使用CSS的filter和backdrop-filter属性来实现模糊效果。

磨砂玻璃效果的代码实现

首先，我们设置背景图片：

body {
    background: url("/glassmorphism-css-11.jpeg") no-repeat center fixed;
    background-size: cover;
}

接着，为卡片元素添加模糊效果：

.card {
    background: rgba(255, 255, 255, 0.3);
    filter: blur(10px);
}

使用伪元素实现模糊层

如果不希望filter影响子元素，可以使用CSS伪元素来构建模糊层：

.card {
    position: relative;
    background: inherit;
    overflow: hidden;
}

.card::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: 8px;
    background: inherit;
    filter: blur(10px);
    z-index: 1;
}

.card > * {
    position: relative;
    z-index: 2;
}

使用`backdrop-filter`提升效果

backdrop-filter在不影响子元素的情况下，可以提供更自然的模糊效果：

.card {
    background-color: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(20px);
    border-radius: 8px;
}

实现亚克力效果

亚克力效果可以通过类似的方式实现，增加一定的透明度和背景噪点来模拟亚克力材质的效果。我们同样可以使用filter或backdrop-filter来构建亚克力效果。

.card {
    background-color: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(20px);
    border-radius: 8px;
    box-shadow: 20px 20px 30px rgba(0, 0, 0, 0.1);
}

实现Glassmorphism效果

Glassmorphism设计风格具有透明、模糊和多层次的特点。我们可以通过以下方式来实现。

设置渐变背景和模糊效果

.card {
    border-radius: 40px;
    background-image: linear-gradient(
        to right bottom,
        rgba(255, 255, 255, 0.4),
        rgba(255, 255, 255, 0.1)
    );
    backdrop-filter: blur(20px);
    border: 3px solid transparent;
    box-shadow: 20px 20px 30px rgba(0, 0, 0, 0.2);
}

为内容层添加透明度和阴影

.card__content {
    background-color: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(20px);
    border-radius: 0 0 40px 40px;
    box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.1);
}

小结

磨砂玻璃（Frosted Glass）、亚克力（Acrylic Material）、Neumorphism UI和Glassmorphism UI都是现代UI设计中的重要风格。通过CSS的filter、backdrop-filter以及box-shadow等属性，我们可以轻松实现这些效果。