CSS3阴影效果如何添加_textshadow与boxshadow的区别及技巧

掌握CSS3阴影效果的关键在于区分text-shadow和box-shadow的应用场景，下面将详细解析两者的差异与使用技巧。

text-shadow 只作用于文字，不能给整个元素加阴影

很多人误以为 text-shadow 可以让按钮、卡片或 div 块级元素带阴影，其实它只影响元素内纯文本内容的渲染。哪怕你给一个

加了 text-shadow，阴影也只会贴着 “hello” 这几个字边缘出现，不会延伸到背景、边框或空白区域。

常见错误现象：

1. 给按钮加了 text-shadow 却发现点击区域没阴影感
2. 用 text-shadow 模拟卡片浮起效果，结果阴影被父容器裁剪或完全不可见

text-shadow 语法是 text-shadow: h-offset v-offset blur-radius color，不支持扩展半径、内阴影、多层叠加写法（CSS4 才支持多层，但兼容性差）它不受 transform 或 filter: drop-shadow() 影响，是独立的渲染层性能较好，尤其适合标题、图标字体等小范围文字增强

box-shadow 是给整个元素盒模型加阴影，支持内阴影和多层

box-shadow 作用对象是元素的 border box（含 border，不含 margin），所以能真实模拟“浮起”“凹陷”“卡片投影”这类 UI 效果。它才是做 UI 阴影的主力。

使用场景：

1. 卡片悬浮时加深阴影
2. 输入框聚焦态添加柔和外扩阴影
3. 按钮按下时切换为 inset 内阴影模拟按压感

基础语法：box-shadow: h-offset v-offset blur-radius spread-radius color，其中 spread-radius 是 text-shadow 没有的关键参数，控制阴影大小扩张加 inset 关键字就能实现内阴影，比如 box-shadow: inset 0 2px 4px rgba(0,0,0,0.1)支持逗号分隔写多个阴影，例如同时加外扩+内陷：box-shadow: 0 4px 12px rgba(0,0,0,0.15), inset 0 -2px 4px rgba(255,255,255,0.8)注意：box-shadow 不会触发重排（reflow），但大量使用模糊大值（如 blur-radius > 30px）在低端设备上可能影响绘制帧率

别用 text-shadow 替代 box-shadow 做布局阴影

曾见过用 8 层 text-shadow 模拟毛玻璃卡片阴影的写法，虽然视觉上有点像，但问题一堆：文字必须存在、换行后阴影错位、无法响应鼠标事件区域变化、无障碍阅读器识别混乱。

真正该选谁，看这个判断逻辑：

1. 只要阴影要包裹整个可点击区域（比如按钮、卡片、模态框），一律用 box-shadow
2. 只希望标题/Logo 文字本身有描边、浮雕、发光等装饰效果，才用 text-shadow
3. 如果需要阴影跟随元素变形（如旋转、缩放），box-shadow 会随 transform 自动适配；text-shadow 则始终相对于文字基线固定

替代方案：filter: drop-shadow() 更灵活但有坑

filter: drop-shadow() 看似万能——它基于元素 Alpha 通道生成阴影，能绕过 border-radius 裁剪、支持不规则图形（比如 SVG、PNG 透明图），但它不是盒模型属性，行为更接近图像滤镜。

容易踩的坑：

1. 它会作用于整个渲染层，父元素如果有 overflow: hidden，阴影照样被裁掉（和 box-shadow 一样）
2. 不支持 inset，也不能设 spread-radius
3. 在 Safari 旧版本中对 transform 元素的阴影位置计算有偏差
4. 开启硬件加速后，部分安卓 WebView 会出现阴影闪烁或消失

/* 推荐仅用于特殊场景，例如给带圆角的图片加自然阴影 */img.rounded {border-radius: 12px;filter: drop-shadow(0 4px 12px rgba(0,0,0,0.15));}

最常被忽略的一点：阴影的视觉层级由堆叠上下文决定，而不是单纯靠 z-index。哪怕你给子元素写了很大的 box-shadow，如果父容器建立了新层叠上下文（比如设置了 opacity或 will-change: transform），阴影也会被截断在父容器边界内。

通过本文的详细解析，相信您已经掌握了CSS3阴影效果的实现技巧，能够根据实际需求灵活选择text-shadow、box-shadow或filter: drop-shadow()来打造完美的视觉效果。