CSS 阴影效果通过 box-shadow、text-shadow、drop-shadow()和伪元素四种方式实现：box-shadow 用于块级元素外 / 内阴影；text-shadow 专用于文字多层阴影；drop-shadow()适配不规则图形；伪元素可创建复杂立体阴影。
如果您希望为 HTML5 页面中的元素添加视觉层次感，CSS 阴影效果是实现这一目标的常用手段。以下是为元素添加 CSS 阴影效果的具体操作方法：
一、使用 box-shadow 属性为块级元素添加阴影
box-shadow 属性适用于所有设置了宽高或具有内容尺寸的块级元素，通过控制水平偏移、垂直偏移、模糊半径、扩展半径和颜色来定义阴影形态。
1、在 CSS 样式中选中目标元素，例如
2、为其添加 box-shadow 声明，格式为：box-shadow: 水平偏移 垂直偏移 模糊半径 扩展半径 颜色；。
立即学习 “ 前端免费学习笔记（深入）”；
3、例如设置右侧下方柔和阴影：box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.2);
4、若需内阴影，添加 inset 关键字：box-shadow: inset 0 -2px 6px rgba(0, 0, 0, 0.1);
二、使用 text-shadow 属性为文字添加阴影
text-shadow 专用于文本节点，可增强标题或强调文字的可读性与设计感，支持单层或多层叠加阴影。
1、选中需要加阴影的文本元素，如
或。2、在 CSS 中添加 text-shadow 属性，格式为：text-shadow: 水平偏移 垂直偏移 模糊半径 颜色；。
3、例如创建清晰的深色文字投影：text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
4、叠加多层阴影时用逗号分隔，如描边 + 发光效果：text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
三、结合 filter 属性使用 drop-shadow()函数
filter 中的 drop-shadow()函数基于图像渲染，能真实模拟元素轮廓投射的阴影，尤其适合不规则形状或带透明区域的图片、SVG 元素。
1、为 ![html5 如何给阴影_HTML5 为元素添加 CSS 阴影效果技巧【阴影添加】]()
、svg> 或设置了 border-radius/clip-path 的
添加 filter 属性。2、使用 drop-shadow()函数，格式为：filter: drop-shadow(水平偏移 垂直偏移 模糊半径 颜色）；。
3、例如为圆角卡片添加贴合边缘的阴影：filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.15));
4、注意该函数不支持 inset 效果，且性能开销略高于 box-shadow，应避免在高频 重绘 区域滥用。
四、利用 伪元素 叠加阴影实现复杂立体效果
通过：:before 或：:after 伪元素绘制独立阴影层，可脱离主元素盒模型限制，实现倾斜、拉伸、多角度等进阶阴影表现。
1、为目标元素设置 position: relative; 以建立定位上下文。
2、在 CSS 中定义伪元素，例如。card::before {content: “”; position: absolute; z-index: -1;}。
3、为伪元素设置宽高、背景及 transform 位移，再应用 box-shadow：box-shadow: 8px 8px 16px rgba(0, 0, 0, 0.2);
4、使用 transform: rotateX(30deg) scale(1.2, 0.3)可模拟透视压缩阴影形态。
2、使用 drop-shadow()函数，格式为：filter: drop-shadow(水平偏移 垂直偏移 模糊半径 颜色）；。
3、例如为圆角卡片添加贴合边缘的阴影：filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.15));
4、注意该函数不支持 inset 效果，且性能开销略高于 box-shadow，应避免在高频 重绘 区域滥用。
四、利用 伪元素 叠加阴影实现复杂立体效果
通过：:before 或：:after 伪元素绘制独立阴影层，可脱离主元素盒模型限制，实现倾斜、拉伸、多角度等进阶阴影表现。
1、为目标元素设置 position: relative; 以建立定位上下文。
2、在 CSS 中定义伪元素，例如。card::before {content: “”; position: absolute; z-index: -1;}。
3、为伪元素设置宽高、背景及 transform 位移，再应用 box-shadow：box-shadow: 8px 8px 16px rgba(0, 0, 0, 0.2);
4、使用 transform: rotateX(30deg) scale(1.2, 0.3)可模拟透视压缩阴影形态。
