Less中用fade()函数可直接设置阴影透明度，它将任意颜色转为指定透明度的rgba()且保持色相亮度，比transparentize()更适用于统一控制阴影不透明度。
Less里用fade()改阴影透明度最直接
Less没有原生“动态阴影”概念，所谓动态，本质是运行时计算颜色透明度。核心方法是用fade()函数处理box-shadow中的颜色值——它能安全地把任意颜色（包括rgba()、十六进制、命名色）转成指定透明度的rgba()，且不破坏原有色相和亮度。
常见错误是手动拼rgba()：比如写rgba(0, 0, 0, @alpha)，结果发现@alpha为0.3时，深色文字在浅背景上几乎看不见，但换成fade(#000, 30%)就能保持视觉灰度一致。因为fade()作用于颜色空间，不是简单乘法。
-
fade(#333, 20%)→rgba(51, 51, 51, 0.2) -
fade(rgb(100, 150, 200), 40%)→rgba(100, 150, 200, 0.4) - 对已带透明度的颜色也有效：
fade(rgba(0, 0, 0, 0.5), 60%)→rgba(0, 0, 0, 0.6)
别用transparentize()替代fade()来调阴影
transparentize()和fade()名字像，行为却相反：transparentize(@color, @amount)是在原透明度基础上“再加一层透明”，而fade()是“重设最终透明度”。做阴影时你要的是后者——比如统一让所有阴影变淡到30%不透明，不是在原有基础上叠一个0.2的透明层。
典型翻车场景：组件库中定义了@shadow-base: #000;，然后用transparentize(@shadow-base, 0.7)生成浅阴影。结果当@shadow-base本身是rgba(0,0,0,0.8)时，transparentize()会算出rgba(0,0,0,0.96)，反而更实；而fade(@shadow-base, 30%)始终输出rgba(0,0,0,0.3)，可控性强。
立即学习“前端免费学习笔记（深入）”；
- 要“设为30%不透明” → 用
fade(@color, 30%) - 要“比原来再透20%” → 才考虑
transparentize(@color, 0.2)，但阴影极少需要这种相对操作
配合变量实现主题化阴影层级
真实项目里阴影不是单个值，而是有层级的：shadow-sm、shadow-md、shadow-lg。Less适合用变量+函数组合生成整套：
@shadow-color: #000;
@shadow-sm: fade(@shadow-color, 12%);
@shadow-md: fade(@shadow-color, 20%);
@shadow-lg: fade(@shadow-color, 30%);
.card {
box-shadow: 0 1px 3px @shadow-sm;
}
.modal {
box-shadow: 0 10px 15px -3px @shadow-md, 0 4px 6px -2px @shadow-sm;
}
注意两点：一是fade()必须作用于颜色变量，不能直接写fade(#000, 20%)在box-shadow声明里（Less 3.5+ 支持，但旧版本会报错）；二是多层阴影中不同层级混用同一基础色+不同fade()值，比硬编码多个rgba()更易维护。
导出CSS时透明度精度问题
Less编译后，fade(#000, 23%)会输出rgba(0, 0, 0, 0.23)，但某些老版浏览器（如IE11）对小数点后两位的透明度支持不稳定，可能渲染为全黑或全透。如果目标环境包含这类浏览器，建议把透明度限制在5%步进（10%、15%、20%…），或者用round()显式控制：
-
fade(#000, round(23.7%, 5%))→ 先四舍五入到25%，再fade() - 更稳妥的做法是定义离散档位：
@shadow-opacity-xs: 10%; @shadow-opacity-sm: 15%; …
实际项目里，阴影的“动态”往往只是主题切换时换一套预设值，真正在运行时靠JS改Less变量的极少——那已经超出Less能力范围，该交给CSS自定义属性了。
