用 CSS 制作衰减阴影

在网页设计中，阴影效果能为元素增添立体感和层次感，而衰减阴影可以使这种效果更加自然和美观。下面就来详细介绍如何用 CSS 制作衰减阴影。

我们要了解 CSS 中与阴影相关的属性，其中 box-shadow 是关键。box-shadow 属性用于在元素的框架上添加一个或多个阴影效果。其基本语法为：box-shadow: h-shadow v-shadow blur spread color inset;

h-shadow 和 v-shadow 分别表示水平和垂直方向的阴影偏移量，正值表示向右和向下偏移，负值则相反。blur 用于定义阴影的模糊半径，数值越大，阴影越模糊，也就是衰减效果越明显。spread 决定阴影的扩展半径，正值使阴影扩大，负值则缩小。color 就是阴影的颜色，inset 关键字用于将外部阴影（默认）改为内部阴影。

例如，我们想要给一个简单的 div 元素添加一个向右下方偏移 5px，模糊半径为 10px，扩展半径为 3px，颜色为灰色的衰减阴影，可以这样写 CSS 代码：

div {
    width: 200px;
    height: 200px;
    background-color: #fff;
    box-shadow: 5px 5px 10px 3px #888888;
}

在上述代码中，由于设置了较大的模糊半径 10px，阴影从元素边缘逐渐向外衰减，呈现出柔和的效果。

如果想要实现更加复杂的衰减阴影效果，比如多个阴影叠加。我们可以在 box-shadow 属性中用逗号分隔多个阴影设置。比如：

div {
    box-shadow: 5px 5px 10px 3px #888888, -5px -5px 10px 3px #aaaaaa;
}

这样就为元素同时添加了两个方向不同的衰减阴影，进一步增强了元素的立体感。

另外，对于一些特殊形状的元素，如圆形或不规则图形，同样可以使用 box-shadow 来制作衰减阴影。只需调整好偏移量、模糊半径等参数，就能让阴影与元素形状完美融合，营造出独特的视觉效果。

通过灵活运用 CSS 的 box-shadow 属性及其各个参数，我们可以轻松为网页元素制作出各种令人惊艳的衰减阴影效果，提升网页的整体视觉质量。