CSS filter: drop-shadow()案例及详解

CSS filter: drop-shadow() 是一个用于创建阴影效果的 CSS 滤镜。它可以为元素添加一个阴影，使元素看起来更立体、更有层次感，常用于设计中。

以下是一个 CSS filter: drop-shadow() 的案例及详解：

HTML 代码：

<div class="box">
  <h2>这是一个标题</h2>
  <p>这是一段文字</p>
</div>

CSS 代码：

.box {
  width: 500px;
  height: 300px;
  background-color: #fff;
  border: 1px solid #ccc;
  padding: 20px;
  filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.5));
}

在上面的代码中，我们给一个名为 box 的 div 元素添加了一个阴影效果。具体解释如下：

- filter: drop-shadow() 表示添加一个阴影效果。
- 0px 0px 10px 表示阴影的偏移量和模糊半径，0px 0px 表示阴影不偏移，10px 表示阴影的模糊半径为 10 像素。
- rgba(0, 0, 0, 0.5) 表示阴影的颜色和透明度，这里表示黑色半透明的阴影。

通过上面的代码，我们可以看到 box 元素被添加了一个黑色半透明的阴影效果，让它看起来更立体、更有层次感。

需要注意的是，CSS filter 属性是一个比较新的 CSS3 属性，不是所有的浏览器都支持，因此在使用时需要进行兼容性处理。同时，CSS filter 的性能也需要考虑，如果同时对多个元素添加阴影效果，可能会影响到页面的性能表现。