safari中box-shadow因overflow:hidden被裁剪，需加transform:translatez(0)；firefox inset阴影小数偏移需改整数；ie11用filter:drop-shadow替代；现代浏览器无需厂商前缀。
box-shadow 在 Safari 里不显示或模糊
这是最常被忽略的兼容性问题：Safari（尤其旧版）对 box-shadow 的解析更严格，当 border-radius 和 box-shadow 同时存在，且元素有 overflow: hidden 时，阴影可能被裁剪甚至完全消失。
实操建议：
- 先确认是否启用了
overflow: hidden—— Safari 会严格按 border-radius 裁剪阴影区域，而 Chrome/Edge 更“宽容” - 给父容器加
transform: translateZ(0)或will-change: transform，强制触发硬件加速，让 Safari 正确绘制阴影层 - 避免在
img或video等替换元素上直接设box-shadow，应包一层div并设display: inline-block
Firefox 中 inset 阴影边缘发虚或偏移
box-shadow: inset 在 Firefox（特别是 v91 之前）存在渲染 bug：当水平/垂直偏移值为小数（如 0.5px）或模糊半径为奇数时，边缘会出现亚像素模糊、颜色变浅，甚至整体阴影向右下轻微偏移。
实操建议：
- 所有偏移值和模糊值统一用整数，例如把
0.5px改成1px，3px模糊改成4px - 避免单独使用
inset配合spread（第四个参数），Firefox 对 spread 的解析不稳定；可拆成两层：外层正常 shadow + 内层 inset 模拟 - 如果必须用小数值，加
backface-visibility: hidden强制重绘，但注意可能影响动画性能
需要兼容 IE11？别用 box-shadow，改用 filter
IE11 不支持 box-shadow 的 inset，且对多层阴影（逗号分隔）解析异常；但支持 filter: drop-shadow()，语法相似、行为更可控。
实操建议：
- 用
filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.3))替代box-shadow，它不受border-radius裁剪影响，也不依赖overflow设置 - 注意
drop-shadow()只接受三个参数（x y blur），不支持 spread 和 inset；如需 spread 效果，得叠加伪元素或额外 wrapper - 务必加前缀：
-webkit-filter: drop-shadow(...)，否则 iOS Safari 8–9 不生效
autoprefixer 是否还该加 -moz-、-o- 前缀？
不需要。现代 box-shadow 已无浏览器需要厂商前缀 —— -moz-box-shadow 自 Firefox 4 起废弃，-webkit-box-shadow 自 Safari 5.1、Chrome 10 起失效，-o-box-shadow 从未被 Opera 正式支持。
实操建议：
- 删掉所有手动写的
-moz-、-webkit-、-o-前缀，它们不仅无效，还会干扰 autoprefixer 的正确判断 - 确保 autoprefixer 目标版本配置合理，例如
"last 2 versions, not dead"，它不会为box-shadow输出任何前缀 - 如果发现加了前缀后反而出问题（比如阴影变双层），大概率是 CSS 优先级或层叠顺序被前缀干扰，而不是前缀本身起作用
真正麻烦的不是写多少前缀，而是阴影在不同缩放比例（如 macOS Retina 屏、Windows 125% 缩放）、不同合成层级（position: fixed vs sticky）、不同字体抗锯齿设置下的像素对齐表现——这些没法靠前缀解决，得靠实际设备真机验证。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
