直接写 box-shadow 易掉帧，因其模糊计算和重排开销大；应改用 scss 变量统一管理语义化阴影等级，并优先使用 filter: drop-shadow() 实现发光效果。
为什么直接写 box-shadow 容易掉帧
浏览器对 box-shadow 的渲染开销取决于它是否触发重绘（repaint）或合成层切换。硬编码多层阴影（如 0 4px 12px rgba(0,0,0,0.15), 0 8px 24px rgba(0,0,0,0.1)）会导致每次修改都需重新计算模糊半径与颜色混合，尤其在滚动或悬停动画中极易卡顿。更关键的是：若阴影值含 width、height 或 background 类属性联动，还会意外触发重排（reflow）。
用 SCSS 变量 + 函数统一管理阴影层级
把阴影抽象成语义化等级，而非像素值堆砌。避免在每个组件里重复写一串数字，也方便全局调整暗色模式下的透明度衰减。
- 定义根级阴影映射：
$shadows: ("sm": 0 2px 4px rgba(0, 0, 0, 0.08), "md": 0 4px 12px rgba(0, 0, 0, 0.12), "lg": 0 8px 24px rgba(0, 0, 0, 0.16)); - 封装获取函数：
@function shadow($level) { @return map-get($shadows, $level); } - 在暗色主题中覆盖映射：
$shadows: ("sm": 0 2px 4px rgba(0, 0, 0, 0.3), ...);，无需改任何调用处
这样，.card { box-shadow: shadow("lg"); } 就具备了主题感知和集中维护能力。
发光效果优先用 filter: drop-shadow() 而非多层 box-shadow
drop-shadow() 是 SVG 滤镜，能绕过元素盒模型限制，对伪元素、clip-path 切割后的形状也能正确投光；且在多数现代浏览器中比等效的多层 box-shadow 更轻量。但注意它不支持内阴影（inset），也不接受 CSS 变量作为参数（需靠 SCSS 插值生成）。
- 错误写法（无法变量化）：
filter: drop-shadow(0 0 8px var(--glow-color));→ 浏览器忽略 - 正确写法（SCSS 插值）：
@function glow($color, $blur: 8px) { @return drop-shadow(0 0 #{$blur} #{$color}); } - 使用：
.icon { filter: glow(#6366f1, 12px); }
搭配 will-change: filter 可提前升层，但仅在频繁变化时启用，否则会浪费内存。
避免在 @keyframes 中动态拼接阴影值
和动画关键帧一样，阴影值若靠 #{$x}px #{$y}px #{$blur}px 拼接，会导致编译后 CSS 体积膨胀、缓存失效，且无法被浏览器 GPU 预判。更严重的是：Sass 不支持在 @keyframes 内部做条件判断，所有分支都会被编译进最终 CSS。
- ❌ 错误：在
@mixin pulse-glow($color)里写@keyframes pulse-#{$color} { ... } - ✅ 正确：固定名
@keyframes pulse-blue，用@mixin控制调用时的animation属性值（时长、填充模式等） - 发光动画只用
opacity和filter，禁用box-shadow动画——后者在帧间插值时计算成本高，易掉帧
真正影响性能的不是“有没有光”，而是“光怎么动”。固定关键帧名 + 变量驱动滤镜值，才是可交付、可压测、可降级的方案。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
