阴影是网页视觉设计里性价比最高的手段之一。一段简单的CSS代码，就能让卡片从平面里"浮"出来，让按钮看起来可以点击，让文字更有质感。html5配合CSS3提供的阴影能力主要包括box-shadow、text-shadow以及filter中的drop-shadow三种，各自适用场景不同。这篇文章从基础语法讲到进阶技巧，帮你把阴影真正用好。
一、box-shadow基础语法与参数详解
box-shadow是最常用的阴影属性，它的完整语法是：box-shadow: x偏移 y偏移 模糊半径 扩散半径 颜色 内阴影(inset)。其中x偏移和y偏移是必填项，控制阴影相对于元素的位置，正值向右向下，负值向左向上。模糊半径决定阴影边缘的柔和程度，值越大边缘越虚化；扩散半径则控制阴影的扩散范围，正值让阴影变大，负值让阴影收缩。
很多初学者容易忽略的一点是，阴影的默认颜色会跟随文字颜色（currentColor），而不是背景色。显式指定颜色是更稳妥的做法，同时建议使用rgba格式带上透明度，纯黑色的阴影会显得很脏，带一点透明度的黑色或深灰色更自然。
.card {
width: 300px;
padding: 20px;
background: #fff;
/* 水平偏移0 垂直偏移4px 模糊12px 扩散0 颜色带透明度 */
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.card-hover:hover {
/* 阴影加深并轻微下移，营造抬起感 */
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}
.card-inset {
/* inset内阴影，常用于输入框按下效果 */
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}实际项目中，偏移量为0、只有垂直模糊的阴影（如0 4px 12px）是最百搭的写法，模拟的是光源在元素正上方的自然效果。而偏移明显的阴影（如4px 4px 8px）更适合表现斜射光源，常见于拟物化设计风格。
二、多层阴影叠加与text-shadow文字效果
box-shadow支持用逗号分隔写多层阴影，浏览器会按书写顺序叠加渲染，先写的在顶层。多层阴影是做出高级感的关键技巧，比如用一层短而实的阴影负责近处接触感，再用一层长而虚的阴影负责大范围投影，层次立刻丰富起来。
.layered-shadow {
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.07), /* 第一层：贴近元素的锐利阴影 */
0 2px 4px rgba(0, 0, 0, 0.07), /* 第二层：中间过渡 */
0 4px 8px rgba(0, 0, 0, 0.07), /* 第三层：大范围柔和阴影 */
0 8px 16px rgba(0, 0, 0, 0.07); /* 第四层：最远处的环境光投影 */
}text-shadow的语法和box-shadow类似，但没有扩散半径和inset关键字，语法为text-shadow: x偏移 y偏移 模糊半径 颜色。它可以为文字添加立体效果、发光效果甚至描边效果。多层文字阴影按层叠加，还能模拟出3D立体字。
/* 文字发光效果 */
.glow-text {
color: #fff;
text-shadow: 0 0 8px rgba(0, 200, 255, 0.8), 0 0 20px rgba(0, 200, 255, 0.5);
}
/* 3D立体字：多层阴影逐层偏移 */
.text-3d {
color: #e74c3c;
text-shadow:
1px 1px 0 #c0392b,
2px 2px 0 #a93226,
3px 3px 0 #922b21,
4px 4px 6px rgba(0, 0, 0, 0.4);
}需要注意，text-shadow对性能的消耗比box-shadow更高，尤其是大面积文字加发光效果时，在低端设备上滚动可能出现掉帧。文字阴影应控制模糊半径在合理范围，避免对整段正文文字使用。
三、drop-shadow处理不规则图形阴影
box-shadow有一个明显局限：它只能给元素的盒子区域加阴影。如果元素是透明背景的PNG图标、CSS绘制的三角形或气泡对话气泡，box-shadow会沿着矩形边框投影，效果非常违和。这种情况下就该用filter的drop-shadow，它会分析元素的alpha通道，沿着实际不透明区域生成阴影。
/* 气泡对话框：伪元素三角形的真实阴影 */
.bubble {
position: relative;
background: #fff;
border-radius: 8px;
filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
}
.bubble::after {
content: "";
position: absolute;
bottom: -10px;
left: 30px;
border: 10px solid transparent;
border-top-color: #fff;
/* 如果给三角形单独用box-shadow，会出现矩形阴影 */
}
/* 箭头图标的阴影跟随形状 */
.arrow-icon {
filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.3));
}drop-shadow的参数只有x偏移、y偏移、模糊半径和颜色，没有扩散半径，也不支持inset。另外它是filter滤镜的一种，会触发GPU合成，一个元素上如果同时需要多个filter效果，可以写成filter: drop-shadow(...) grayscale(...)的形式链式调用。两者的选择原则很简单：规则盒子用box-shadow性能更好，不规则透明图形用drop-shadow效果更真实。
四、阴影过渡动画与常见踩坑点
给阴影加上transition过渡，可以让交互反馈细腻很多，鼠标悬停时阴影平滑加深，是卡片式设计中非常经典的动效。写法上要注意，起始状态和结束状态都必须定义box-shadow，transition才能正确插值。
.interactive-card {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.interactive-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.2);
}实际布局中阴影有几个高频踩坑点需要留意。第一个是阴影被裁切：如果父容器设置了overflow: hidden，子元素超出部分的阴影会被直接切掉，解决办法是给父容器留出足够的padding，或者调整overflow策略。第二个是层叠上下文问题：父元素创建了新的层叠上下文时，子元素的阴影可能被其他元素遮挡，需要检查z-index和定位关系。
第三个是性能问题。阴影在浏览器中是实时重绘的，模糊半径越大渲染成本越高。滚动区域内如果有大量带大模糊阴影的元素，滚动流畅度会明显下降。优化思路包括：给阴影元素加上will-change: transform或直接用transform: translateZ(0)提升到合成层；对静态阴影，可以考虑用预渲染的阴影图片替代；移动端尽量把模糊半径控制在20px以内，并减少多层阴影的使用数量。
最后总结一下选择思路：普通卡片、按钮用box-shadow，追求质感就多层叠加；文字效果用text-shadow控制好模糊范围；透明图标和不规则形状交给drop-shadow；配合transition让阴影变化平滑过渡。掌握这几个组合，html5页面的阴影布局基本就游刃有余了。
html5阴影box-shadowtext-shadow阴影布局修改时间：2026-09-13 02:44:30