box-shadow需元素有尺寸或内容才生效，语法为h-offset v-offset blur spread color inset；text-shadow作用于字符轮廓，支持多层叠加；二者渲染层级独立，但box-shadow受transform影响而text-shadow不受。
box-shadow 设置元素盒子阴影的正确写法
直接用 box-shadow 给块级或行内元素加阴影，但很多人写完没效果，其实是忽略了「元素必须有尺寸或内容」这个前提。比如给空的 <div></div> 加阴影，不设 width/height 或 padding，阴影就不可见。
语法格式是：box-shadow: h-offset v-offset blur spread color inset;，其中前两个值（水平偏移、垂直偏移）必填，其余可选。
-
h-offset和v-offset为 0 时，阴影居中；负值会让阴影反向偏移（比如-2px -2px表示阴影在左上方） -
blur值越大越模糊，但不能为负；设为 0 时边缘锐利 -
spread可正可负：正值扩大阴影面积，负值收缩（常用于做出「内凹」错觉） - 加上
inset关键字，阴影就变成「内阴影」，适用于按钮按压态或卡片凹陷效果
常见错误：box-shadow: 0 0 10px #000; 看似简洁，但在高分屏或深色背景上可能太淡——建议明确加 rgba(0,0,0,0.15) 控制透明度。
text-shadow 实现文字阴影的实用技巧
text-shadow 不是给整个文字块加一层蒙版，而是对每个字符轮廓单独描边，所以它天然支持多重阴影叠加，也容易被 overflow: hidden 或 text-overflow: ellipsis 截断。
立即学习“前端免费学习笔记（深入）”；
基本格式：text-shadow: h-offset v-offset blur color;，没有 spread 和 inset。
- 单层阴影常用作可读性增强：比如白字配
text-shadow: 1px 1px 2px rgba(0,0,0,0.3);防止贴底消失 - 多层阴影可以模拟立体字：例如
text-shadow: 0 1px 0 #ccc, 0 2px 0 #aaa, 0 3px 0 #999; - 注意：不要对小字号（如 12px 以下）滥用模糊值，
blur > 1px会导致文字发虚、辨识度下降
兼容性提醒：IE9+ 支持 text-shadow，但 IE9 不支持多层；若需兼容旧 IE，得用滤镜（filter: glow()），但现在基本不用考虑。
box-shadow 和 text-shadow 同时使用时的层级与渲染顺序
两者互不影响渲染层级：box-shadow 属于元素盒模型的绘制层，画在元素背景和边框之外；text-shadow 是文字绘制阶段的一部分，画在文字内容之上、但仍在元素内容区内部。也就是说，即使 box-shadow 很大，也不会盖住 text-shadow，反之亦然。
但要注意一个易忽略点：如果元素设置了 transform: scale(0.9) 或 opacity: 0.9，box-shadow 会随变换缩放/淡化，而 text-shadow 不会——它的参数是绝对像素值，不受 CSS 变换影响。
- 需要同步缩放阴影？只能手动调整
box-shadow的偏移和模糊值，或改用 SVG 文字 +filter: drop-shadow() - 想让文字阴影也响应透明度变化？目前无原生方案，
text-shadow的颜色必须自己用rgba()手动调低 alpha
性能敏感场景下阴影的取舍建议
大量使用高模糊值（blur > 12px）或多重 box-shadow 的元素，在滚动或动画时容易触发全层重绘，尤其在移动端 Webview 中卡顿明显。
- 优先用
filter: drop-shadow()替代box-shadow实现简单投影——它基于 GPU 加速，且支持圆角裁剪（box-shadow在圆角元素上会溢出） - 动画中避免动态修改
box-shadow的blur或spread，改用transform移动阴影偏移更高效 -
text-shadow性能开销远小于box-shadow，但连用超过 3 层且字体较大时，iOS Safari 仍可能出现光栅化延迟
最常被忽视的是：阴影不是装饰品，它是视觉层级信号。用错位置（比如卡片之间没阴影）、强度失衡（标题阴影比卡片还重），比不用更破坏体验。
