less中写多层box-shadow需用变量拆解每层参数、mixin封装组合逻辑，配合fade()动态控色、unit()/round()实现尺寸缩放，合并阴影列表一次性输出，避免嵌套覆盖，并注意ie11兼容性及color function使用陷阱。
Less里怎么写多层box-shadow？
Less本身不改变box-shadow语法，但能用变量和函数大幅简化多层阴影的维护。直接拼接字符串容易出错，尤其当阴影要响应主题色或动态缩放时。
常见错误是把多个阴影值硬编码成一长串，比如：box-shadow: 0 2px 4px rgba(0,0,0,0.1), 0 4px 12px rgba(0,0,0,0.15), 0 8px 24px rgba(0,0,0,0.2);——改一个参数就得通读整行，漏掉逗号或括号就失效。
- 用变量拆解每层：定义
@shadow-level-1、@shadow-level-2等，分别存偏移、模糊、颜色 - 用
.box-shadow()混合（mixin）封装组合逻辑，避免重复写box-shadow: - 颜色推荐用
fade(@primary-color, 15%)而非固定rgba()，方便主题切换
如何让阴影随元素尺寸自动缩放？
纯CSS做不到按宽高比例缩放阴影，但Less可以通过计算实现。比如卡片宽度翻倍时，希望阴影模糊半径也翻倍，否则显得过轻。
关键在用unit()和round()控制单位转换，避免px与无单位数值混算出错：
.card {
width: 300px;
@base-blur: 8;
@scale: unit(@width / 300, '');
box-shadow: 0 round(@base-blur * @scale)px round(@base-blur * @scale * 1.5)px fade(#000, 12%);
}
注意：@scale必须是纯数字（去掉px），否则* @scale会报错；round()防止出现12.3333px这种无效值。
为什么嵌套调用阴影mixin会丢失层级？
Less编译时，如果在嵌套选择器里多次调用同一个.box-shadow() mixin，后一次会覆盖前一次，而不是叠加——这是Less作用域和输出机制决定的，不是bug。
正确做法是把所有层预先合并为一个列表变量，再一次性传入mixin：
.shadow-combo() {
@shadows: 0 2px 4px fade(#000, 10%), 0 4px 12px fade(#000, 15%);
box-shadow: @shadows;
}
- 别写成两次
.box-shadow(...)调用，编译后只剩最后一句 - 如果需条件添加某层（如hover态加一层外发光），用
when守卫+字符串拼接，但要注意逗号分隔 - IE11不支持多层
box-shadow，若需兼容，得用伪元素模拟，Less里就别白费劲了
用color functions动态生成阴影色时踩过哪些坑？
想让阴影随主色调变深，常误用darken(@color, 20%)——它只调亮度，没降透明度，结果阴影发灰发脏。真正需要的是保持色相、降低明度+增加透明度。
- 优先用
fade(hsl(@h, @s, @l - 15%), 30%)，先调明度再控透明 - 避免对已带alpha的颜色再套
fade()，比如fade(fade(#000, 20%), 50%)会变成rgba(0,0,0,0.1)，不是预期的0.5 - 导出到CSS时，Less会把
fade(#000, 30%)编译成rgba(0,0,0,0.3)，没问题；但fade(black, 30%)可能被某些版本解析为关键字而非颜色值，统一用#000更稳
复杂阴影的本质是控制好每层的物理意义：偏移决定方向感，模糊半径决定软硬，透明度决定重量感。Less只是帮你管住这些变量，别让它替你做设计判断。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
