CSS 磨砂质感实现方法：背景图、伪元素、阴影和滤镜

要实现磨砂质感，可以使用 CSS 的一些属性和技巧：

使用背景图像：可以使用磨砂质感的图片作为背景图像，设置在元素的 background 属性中。
使用伪元素：可以使用:before 或:after 伪元素来创建一个透明的磨砂层，并将其覆盖在元素上。
使用 box-shadow：可以使用 box-shadow 属性来创建一个磨砂效果的阴影，可以设置多个不同颜色和透明度的阴影来实现更复杂的效果。
使用 filter：可以使用 CSS 的 filter 属性来实现磨砂效果，可以使用 blur、brightness、contrast 等滤镜来创建不同的效果。

例如，下面是一个简单的例子，展示了如何使用伪元素和 box-shadow 属性来创建一个磨砂质感的效果：

<style>
    .box {
        position: relative;
        width: 200px;
        height: 200px;
        background-color: #ccc;
    }
    .box:before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(255,255,255,0.5);
        z-index: 1;
    }
    .box:after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        box-shadow: inset 0 0 50px rgba(0,0,0,0.5);
        z-index: 2;
    }
</style>

<div class="box"></div>

在这个例子中，我们创建了一个元素 .box，使用伪元素 :before 和 :after 来分别添加一个透明的背景层和一个 box-shadow 效果的磨砂层。我们将 :before 层设置为半透明的白色，使其看起来像是一个磨砂玻璃的效果，然后使用 :after 层来创建一个黑色的 box-shadow 效果，使其看起来像是磨砂的表面。最后，我们将元素 .box 的 position 属性设置为 relative，使 :before 和 :after 伪元素相对于元素 .box 进行定位。