使用 CSS 制作毛玻璃效果

你要做的只是设置一个半透明背景颜色，并使用 backdrop-filter 属性设置模糊效果。在 .card 元素的样式中加入以下 CSS：

.card {
    /* other styles */
    background: rgba(255, 255, 255, .7);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

使用 CSS 制作毛玻璃效果

现在我们已经为卡片加上了毛玻璃效果的样式，可是为什么看起来没效果？

我们还需要在卡片后面加上一些元素，如一些形状或者图片，以便看到它的实际效果。