box-shadow在现代浏览器中已无需前缀，firefox 4+、chrome 10+、safari 5.1+、edge 12+均原生支持标准写法；ie8需-mso-filter，ie7及更早用filter，ie10+支持标准属性。
box-shadow 在现代浏览器中已无需前缀，但若需支持 IE8–IE9 或旧版 Firefox/Chrome，仍得保留历史写法。直接写 box-shadow 会丢掉部分用户，盲目加所有前缀又冗余——关键看目标环境。
哪些浏览器真需要前缀？
2026 年绝大多数项目已可弃用 -moz-box-shadow 和 -webkit-box-shadow：Firefox 4+、Chrome 10+、Safari 5.1+、Edge 12+ 均原生支持标准 box-shadow。真正要处理的只剩 IE：
- IE8：仅支持
-ms-filter（注意是双引号包裹的字符串） - IE7 及更早：只认
filter（无引号，且 Direction 必须是 0–360 的整数） - IE10+：已支持标准
box-shadow，但不识别-ms-filter
也就是说，兼容 IE8 的最小必要组合是：
.card {
box-shadow: 0 2px 8px rgba(0,0,0,.12);
/* IE8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
/* IE7- */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');
}
为什么 filter 阴影看起来“糊”且偏移不准？
filter: drop-shadow() 或 IE 的 filter 是基于像素渲染的位图滤镜，不是矢量投影，所以：
- Direction=135 表示阴影朝右下 45°，但实际偏移受元素尺寸影响，无法精确对应
box-shadow的2px 2px - Strength 控制的是“厚度”，不是模糊半径；值设太大容易出现锯齿或色块
- IE 滤镜不支持
rgba，Color必须是十六进制（如#333），透明度只能靠 Strength 间接控制
如果设计允许，建议对 IE8 用户降级为纯边框：border: 1px solid #eee，比勉强套用滤镜更稳定。
移动端和高 DPI 屏幕要注意什么？
在 Retina 或安卓高刷屏上，过大的 blur 值（如 >20px）会导致重绘开销飙升，尤其当元素有 position: fixed 或参与滚动复合层时：
- iOS Safari 对
box-shadow的模糊渲染有硬件加速限制，超过 12px 后性能下降明显 - Android Chrome 会将高 blur 值阴影转为离屏渲染，频繁更新时易触发卡顿
- 推荐实践：卡片类元素用
0 4px 8px rgba(0,0,0,.1)，按钮 hover 用0 2px 4px rgba(0,0,0,.15)
不要为了“视觉冲击力”把 blur 设成 32px——它不会更高级，只会让低端机变烫。
要不要用 filter: drop-shadow() 替代 box-shadow？
只在一种场景下值得换：元素本身有透明区域（如 PNG 图标、SVG、带 alpha 的 canvas）。因为 box-shadow 是围绕盒模型矩形区域投射，而 drop-shadow() 跟随 Alpha 通道轮廓：
.icon {
/* 矩形阴影，盖不住图标空白处 */
box-shadow: 2px 2px 4px rgba(0,0,0,.3);
}
.icon-transparent {
/* 沿 PNG 边缘投射，更自然 */
filter: drop-shadow(2px 2px 4px rgba(0,0,0,.3));
}
但注意：drop-shadow() 在 IE 和旧版 Safari（inset 或 spread ——它就是个单参数阴影工具。
IE 的 filter 写法里引号、括号、大小写都敏感，漏一个双引号或写错 DXImageTransform 大小写，整个规则就静默失效。这不是语法错误，而是 IE 直接跳过该行——你得手动打开开发者工具的“已应用样式”面板逐条核对。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
