box-shadow语法为box-shadow: h-offset v-offset blur spread color inset，前两个参数必填，blur不可为负，inset须置末尾；常用示例：box-shadow: 2px 2px 4px rgba(0,0,0,0.2)。
box-shadow 设置元素投影，注意 offset 和 blur 的顺序
HTML 元素本身不支持直接加阴影，必须通过 CSS 的 box-shadow 实现。它的语法是：box-shadow: h-offset v-offset blur-radius spread-radius color inset，其中前三个参数必填，其余可选。
常见错误是把水平偏移写成正数就以为“向右”，结果发现阴影跑到了左上角——其实是 h-offset 为正时向右，v-offset 为正时向下，但很多人漏掉单位（如 px）导致整条声明失效。
-
box-shadow: 2px 2px 4px rgba(0,0,0,0.2)是最常用的基础投影：右下 2px、模糊 4px、半透黑 - 要内阴影？加
inset关键字，且必须放在最后：box-shadow: 0 0 6px 2px #eee inset -
spread-radius控制阴影大小扩张，正值放大、负值收缩；设为负值时容易让阴影“缩进”到边框内侧，适合卡片浮起感 - 多个阴影用逗号分隔：
box-shadow: 0 2px 4px #000, 0 -2px 4px #fff（上下双层模拟立体）
text-shadow 控制文字阴影，别和 box-shadow 混用
text-shadow 只作用于文字内容，语法比 box-shadow 更简单：text-shadow: h-offset v-offset blur-radius color，没有 spread 和 inset。
它不继承父容器的 box-shadow，也不能给伪元素（如 ::before）里的纯 content 文字加阴影——除非该伪元素设置了 content 并启用了 display: inline 或类似行为。
- 单层阴影：
text-shadow: 1px 1px 2px rgba(0,0,0,0.3) - 做描边效果？叠两层相反方向的阴影：
text-shadow: -1px -1px 0 #000, 1px 1px 0 #000 - 避免在小字号文字上用大
blur-radius，会糊成一团，建议font-size 时 <code>blur-radius ≤ 1px - 不支持
inset，想实现“内凹文字”得靠背景+遮罩或 SVG
阴影性能问题：filter: drop-shadow() 和 box-shadow 的区别
当需要对非矩形元素（比如带透明通道的 PNG、border-radius > 0 的圆角、clip-path 裁切后）加阴影时，box-shadow 会按原始盒模型渲染，边缘可能生硬。此时该用 filter: drop-shadow()。
它基于像素运算，能贴合实际 Alpha 通道轮廓，但开销更大，滚动或动画中容易掉帧。
-
filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.2))写法和box-shadow类似，但参数不能省略单位，且不支持inset或spread - 不能和
transform同时触发硬件加速时叠加使用，某些旧版 Safari 下会失效 - 如果只是圆角卡片，优先用
box-shadow+border-radius；真需要贴图轮廓阴影，再切到filter - 注意：
filter会作用于整个元素及其子树，慎用于包含大量子节点的容器
IE 兼容与移动端适配的隐藏坑
IE10+ 支持 box-shadow，但 IE9 及以下完全不支持，连降级方案都难做；而 iOS Safari 在早期版本中对 filter: drop-shadow() 渲染异常，会出现锯齿或偏移。
更隐蔽的问题是：安卓 WebView（尤其 Android 4.x）里，box-shadow 在 position: fixed 元素上可能消失，或者在 overflow: hidden 容器里被裁掉——不是代码错，是渲染管线限制。
- 需要兼容 IE9？只能用 PNG 阴影图或 JS 插件（如 jQuery.shadow），但已不推荐
- 移动端测试务必真机验证，模拟器常掩盖
filter的模糊精度问题 - 深色模式下，硬编码
#000阴影可能看不见，建议用rgba(0,0,0,0.15)而非#000 - 不要在
:hover中突然加巨大阴影，iOS 上可能触发重排卡顿，建议预先设好基础值，只改opacity或transform
阴影看着简单，但 offset 方向、blur 单位、filter 渲染路径、以及不同设备的合成策略，每一步都可能悄悄破坏预期效果。调的时候别只盯视觉，顺手打开 DevTools 的 Rendering 面板看 layer 划分，比肉眼判断更可靠。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
