box-shadow参数顺序为水平偏移、垂直偏移、模糊半径、扩展半径、颜色、可选inset；模糊半径必填且非负，inset须置于颜色前，多层阴影用逗号分隔但需注意性能，移动端大模糊值需实测。
box-shadow 的基本写法和参数顺序
直接写 box-shadow 时，参数顺序不能错：水平偏移、垂直偏移、模糊半径、扩展半径、颜色、可选的 inset。漏掉某个值（比如模糊半径）会导致整个声明失效，浏览器不会报错但阴影不显示。
常见错误现象：box-shadow: 0 0 #000; 看不到效果——因为缺少模糊半径，浏览器把它当成了无效值；正确写法是 box-shadow: 0 0 8px #000;。
- 模糊半径（第三位）必须为非负数，
0是合法的，但没模糊效果 - 扩展半径（第四位）可正可负：正值扩大阴影范围，负值收缩，容易让阴影“卡进”边框里
- 颜色支持透明度，推荐用
rgba(0,0,0,0.2)而不是#000，更可控
内阴影 inset 怎么加才生效
inset 必须放在所有长度值之后、颜色之前，位置错了就变成普通外阴影。而且它依赖元素有「内容区域」或「背景色」才能看清效果——纯透明背景+内阴影，等于没加。
使用场景：输入框聚焦态、卡片凹陷感、按钮按压反馈。但注意：如果元素没有设置 background-color 或 border，inset 阴影可能被裁剪或不可见。
立即学习“前端免费学习笔记（深入）”；
- 错误写法：
box-shadow: inset 0 0 6px #000;（inset在最前，无效） - 正确写法：
box-shadow: 0 0 6px rgba(0,0,0,0.15) inset; - 配合
padding使用更安全，避免阴影被内容遮盖
多层阴影怎么叠加又不卡顿
一个 box-shadow 值里可以写多个阴影，用逗号分隔。但每多一层，渲染开销就略增，尤其在滚动容器或动画中，容易触发重绘。
性能影响：三层以上阴影在低端 Android 或旧版 Safari 上可能出现掉帧；模糊半径超过 30px 时，GPU 加速不一定生效，反而变慢。
- 写法示例：
box-shadow: 0 2px 4px rgba(0,0,0,0.1), 0 8px 16px rgba(0,0,0,0.08); - 避免在同一元素上混用大模糊 + 大扩展 +
inset，组合越复杂，合成成本越高 - 需要动态控制时，优先用 class 切换，而不是 JS 拼接字符串改
style.boxShadow
box-shadow 在不同浏览器里的兼容性坑
现代浏览器都支持 box-shadow，但 IE9+ 才开始支持，IE8 及以下完全忽略。真正容易出问题的是 Safari 旧版本（inset 和负扩展半径的处理不一致，有时会裁掉一部分。
兼容性影响：iOS 13.7 的 Safari 对 box-shadow 与 transform: scale() 同时使用时，阴影可能错位；Chrome 90+ 开始对超大模糊值（>100px）做降级渲染。
- 不要依赖
box-shadow做关键布局定位，它不影响盒模型尺寸 - 用
filter: drop-shadow()替代某些场景（比如不规则形状阴影），但注意它不支持inset - 检查设计稿里的阴影参数，模糊值 >24px 时，在移动端要实机测一测是否糊成一片
阴影看着简单，但参数之间互相牵制，改一个值常要调三个——尤其是模糊、扩展、颜色透明度这三者得一起看效果。别信“设个固定值就能复用”，每个元素的背景、尺寸、父容器 overflow 都会影响最终呈现。
