CSS3阴影效果怎么加_textshadow和boxshadow区别【技巧】_网络技术

text-shadow仅作用于文字内容，box-shadow才用于整个元素阴影；前者语法无spread-radius且不支持内阴影，后者可控制扩张、内陷及多层叠加，是UI阴影首选。

很多人误以为 text-shadow 可以让按钮、卡片或 div 块级元素带阴影，其实它只影响元素内纯文本内容的渲染。哪怕你给一个 hello 加了 text-shadow，阴影也只会贴着 “hello” 这几个字边缘出现，不会延伸到背景、边框或空白区域。

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

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

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

使用场景：
– 卡片悬浮时加深阴影
– 输入框聚焦态添加柔和外扩阴影
– 按钮按下时切换为 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）在低端设备上可能影响绘制帧率

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

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

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

容易踩的坑：

/* 推荐仅用于特殊场景，例如给带圆角的图片加自然阴影 */
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），阴影也会被截断在父容器边界内。