text-shadow仅作用于文字内容，box-shadow才用于整个元素阴影；前者语法无spread-radius且不支持内阴影，后者可控制扩张、内陷及多层叠加，是UI阴影首选。
text-shadow 只作用于文字，不能给整个元素加阴影
很多人误以为 text-shadow 可以让按钮、卡片或 div 块级元素带阴影，其实它只影响元素内纯文本内容的渲染。哪怕你给一个 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 是给整个元素盒模型加阴影，支持内阴影和多层
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）在低端设备上可能影响绘制帧率
别用 text-shadow 替代 box-shadow 做布局阴影
曾见过用 8 层 text-shadow 模拟毛玻璃卡片阴影的写法，虽然视觉上有点像，但问题一堆：文字必须存在、换行后阴影错位、无法响应鼠标事件区域变化、无障碍阅读器识别混乱。
真正该选谁，看这个判断逻辑：
- 只要阴影要包裹整个可点击区域（比如按钮、卡片、模态框），一律用
box-shadow - 只希望标题/Logo 文字本身有描边、浮雕、发光等装饰效果，才用
text-shadow - 如果需要阴影跟随元素变形（如旋转、缩放），
box-shadow会随 transform 自动适配；text-shadow则始终相对于文字基线固定
替代方案：filter: drop-shadow() 更灵活但有坑
filter: drop-shadow() 看似万能——它基于元素 Alpha 通道生成阴影，能绕过 border-radius 裁剪、支持不规则图形（比如 SVG、PNG 透明图），但它不是盒模型属性，行为更接近图像滤镜。
容易踩的坑：
- 它会作用于整个渲染层，父元素如果有
overflow: hidden，阴影照样被裁掉（和box-shadow一样） - 不支持
inset，也不能设spread-radius - 在 Safari 旧版本中对
transform元素的阴影位置计算有偏差 - 开启硬件加速后，部分安卓 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），阴影也会被截断在父容器边界内。
