旧版webkit（如safari 5.1、chrome 10–25）必须写-webkit-box-shadow，因其完全不识别无前缀box-shadow；多阴影逗号写法不稳定，rgba()低透明度易失效，负blur值会导致整条声明被忽略。
旧版WebKit（如Safari 5.1、Chrome 10–25）必须写-webkit-box-shadow
现代浏览器已统一支持标准box-shadow，但旧版WebKit内核（特别是2012年前后发布的Safari 5.1、iOS 5.1、Chrome 10–25）完全不识别无前缀的box-shadow，直接忽略该声明。只写box-shadow会导致阴影彻底消失，且无任何控制台报错提示。
实操建议：
- 必须显式声明
-webkit-box-shadow，且放在标准box-shadow之前（CSS解析按顺序覆盖，但此处是兼容性兜底，非覆盖） - 参数顺序、单位、值规则与标准语法完全一致，无需调整数值逻辑
- 不要依赖自动前缀工具（如Autoprefixer v9+默认已移除
-webkit-box-shadow），需手动补全 - 示例写法：
.card { -webkit-box-shadow: 2px 2px 6px rgba(0,0,0,0.2); -moz-box-shadow: 2px 2px 6px rgba(0,0,0,0.2); box-shadow: 2px 2px 6px rgba(0,0,0,0.2); }
-webkit-box-shadow不支持inset以外的多阴影逗号分隔写法？
旧版WebKit（Chrome ≤25、Safari ≤5.1）对多阴影的支持极不稳定：它能解析inset内阴影 + 外阴影组合，但若多个外阴影用逗号分隔，部分版本会只渲染第一个、或完全失效。
常见错误现象：
-
box-shadow: 0 2px 4px #000, 0 -2px 4px #ccc→ Safari 5.1仅显示下方阴影，上方阴影丢失 -
-webkit-box-shadow: inset 0 0 8px #333, 0 4px 8px rgba(0,0,0,0.1)→ 多数旧版WebKit可正常渲染（因含inset触发更完整解析路径）
稳妥做法：
- 避免在旧版WebKit中依赖纯外阴影的多层逗号写法
- 如需多重外阴影效果，改用伪元素叠加（如
::before+::after各加一层） - 测试重点放在iOS 5.1真机或Safari 5.1模拟环境，不能仅靠Chrome旧版判断
颜色值用rgba()在旧版WebKit中可能变黑或透明
旧版WebKit对rgba()的支持存在两个关键缺陷：一是alpha通道低于0.1时可能被截断为0（全透明），二是某些版本将未指定alpha的rgb()误判为rgba(0,0,0,1)导致意外深色阴影。
典型表现：
-
-webkit-box-shadow: 0 2px 4px rgba(0,0,0,0.05)→ 阴影不可见（实际渲染为rgba(0,0,0,0)） -
-webkit-box-shadow: 0 2px 4px rgb(100,100,100)→ 某些Android 4.0 WebView中渲染成纯黑
解决方案：
- alpha值不低于
0.1，推荐使用0.12或0.15起始 - 优先用十六进制色值（如
#666）替代rgb()，避免解析歧义 - 若必须低透明度，改用
hsla()（旧版WebKit对其alpha处理更稳定）
模糊半径blur为负值在旧版WebKit中会被静默丢弃
标准CSS规范明确禁止blur为负值，但现代浏览器会自动截为0并继续渲染；而旧版WebKit遇到负blur（如-2px）时，整条-webkit-box-shadow声明会被整个忽略——连同后面的x-offset、y-offset、颜色等一并失效。
容易踩的坑：
- 从设计稿或Figma插件导出CSS时，某些工具会误生成
blur: -1px（意图“锐化”），在旧版WebKit中导致阴影消失 - 使用CSS变量或预处理器动态计算时，未做
max(0, $blur)校验
检查方法：
- 打开旧版Safari开发者工具 → Elements面板 → 查看
-webkit-box-shadow是否被划掉（strikethrough） - 临时把
blur改成0，若阴影恢复，则确认是负值问题 - 所有
blur值强制通过abs()或max(0, ...)处理
box-shadow行为不是“少功能”，而是“解析器级容错差”：一个参数越界，整条规则作废。真正难调试的从来不是写法本身，而是它不报错、不警告、不渲染——只安静地消失。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
