box-shadow 无需前缀，现代浏览器100%支持标准语法；应封装多层阴影逻辑而非兼容性，如 shadow-layers()；drop-shadow() 才需兼容处理，用 @supports 降级。
别用 SCSS mixin 封装“跨浏览器兼容的 box-shadow”——它根本不需要兼容，现代浏览器对 box-shadow 的支持已 100% 统一，加前缀反而会出错。
为什么 box-shadow 不需要手动加前缀
Autoprefixer 官方数据明确显示：box-shadow 自 IE9 起就无需任何厂商前缀；Chrome 26+、Firefox 4+、Safari 5.1+、Edge 12+ 全部原生支持标准语法。你写 box-shadow: 0 2px 4px rgba(0,0,0,0.1)，Autoprefixer 什么都不会加——这是正确行为，不是漏了。
常见错误现象：
- 手写
@include prefix(box-shadow, ...)→ 编译出-webkit-box-shadow，触发无效 CSS 报错 - 在
@mixin shadow()里硬塞-moz-box-shadow→ 现代 Firefox 忽略它，但旧版早已淘汰，纯属冗余 - 把
box-shadow和filter: drop-shadow()混为一谈 → 后者才需注意 Safari 旧版本兼容性
真正需要封装的，是多层阴影 + 响应式缩放逻辑
视觉上“有深度”的阴影往往由 2–3 层组成（例如卡片浮起 + 底部扩散），且小屏需收窄模糊值防过曝。这时用 mixin 控制参数比重复写逗号分隔列表更安全。
实操建议：
- 函数名用
shadow-layers()而非prefix-shadow()，语义清晰 - 所有参数带单位：
$blur-base: 4px（不能是4或4rem，box-shadow 中rem渲染不稳定） - 返回值必须是 space-separated list，直接赋给
box-shadow才合法：box-shadow: shadow-layers(#000, 3px, 2); - 配合
@media在 mixin 外动态缩放，而非在函数内做条件判断（SCSS 函数无法读取媒体查询状态）
遇到 drop-shadow() 才要小心兼容性
当你要给 SVG、PNG 或带透明轮廓的元素投阴影时，filter: drop-shadow() 是唯一选择，但它在 Safari 12.1 之前不支持，且旧安卓 WebView 可能完全失效。
正确处理方式：
- 不封装成通用前缀 mixin，而是显式声明两套 fallback：
- 先写标准
filter: drop-shadow(...) - 再用
@supports not (filter: drop-shadow())降级为box-shadow（虽形状不准，但至少有影） - 避免在 mixin 里拼接
filter字符串——drop-shadow(#{...})容易因空格或单位缺失导致语法错误
最容易被忽略的一点：多层 box-shadow 堆叠时，如果某一层用了 inset，整个值必须用 unquote() 包裹才能通过 Sass 编译，否则报 Incompatible units；而 drop-shadow() 永远不接受 inset —— 这类细节不会出现在文档首页，但一踩就卡编译。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
