CSS 实现阴影效果

在网页设计中，阴影效果能为元素增添立体感和层次感，让页面更加生动、吸引人。通过 CSS，我们可以轻松实现各种阴影效果。

盒阴影

盒阴影（box-shadow）是 CSS 中常用的阴影属性。其语法为：box-shadow: h-shadow v-shadow blur spread color inset;。其中，h-shadow 和 v-shadow 分别定义水平和垂直方向的阴影偏移量，正值表示向右和向下偏移；blur 定义阴影的模糊半径，值越大阴影越模糊；spread 定义阴影的扩展半径，正值使阴影扩大，负值使阴影缩小；color 是阴影的颜色；inset 关键字可将外部阴影变为内部阴影。

例如，要为一个 div 元素添加一个简单的盒阴影，可以这样写：

div {
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
}

这段代码会使 div 元素产生一个向右和向下各偏移 5px，模糊半径为 10px，颜色为半透明黑色的外部阴影。

文本阴影

文本阴影（text-shadow）用于为文本添加阴影效果。语法为：text-shadow: h-shadow v-shadow blur color;。与盒阴影类似，h-shadow 和 v-shadow 控制水平和垂直偏移，blur 是模糊半径，color 是阴影颜色。

比如：

h1 {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

这会让 h1 标题文本有一个向右和向下各偏移 2px，模糊半径为 4px 的半透明黑色阴影，使文本看起来更有立体感。

多重阴影

CSS 支持为一个元素添加多重阴影。只需在属性值中用逗号分隔多个阴影设置即可。

div {
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5), -5px -5px 10px rgba(255, 255, 255, 0.8);
}

这段代码为 div 元素同时添加了两个盒阴影，一个是黑色的普通阴影，另一个是白色的反向阴影，营造出独特的视觉效果。

通过合理运用 CSS 的阴影属性，我们能够根据设计需求，为网页元素打造出丰富多样的阴影效果，提升页面的视觉品质和用户体验。无论是简单的立体感增强，还是复杂的创意设计，CSS 阴影都能发挥重要作用。