应定义支持多参数的.shadow()mixin，参数顺序为@x、@y、@blur、@spread、@color（默认fade(#000,10%)）、@inset（布尔值），用~"@(inset) @(x)..."转义拼接；组合使用时需确保.border-radius≥@blur+@spread以防阴影被裁剪。
直接用带参数的 .shadow() Mixin 封装，比硬写 box-shadow 值更可控、可维护性高得多；但参数设计不合理或忽略渲染约束，反而会让阴影在真实场景中“切边”或失效。
如何定义支持多参数的 .shadow() Mixin
Less 里不能靠拼字符串生成合法 box-shadow 值，必须用转义语法 ~"..." 配合插值。参数顺序按 CSS 原生书写习惯来，避免调用时记混：
-
@x、@y、@blur、@spread四个偏移/模糊参数保持标准顺序 -
@color默认用fade(#000, 10%)，不是写死rgba(0,0,0,.1)，方便主题色切换时自动适配明暗 -
@inset是布尔开关，默认false，启用时插值为inset字符串
示例定义：
.shadow(@x: 0, @y: 2px, @blur: 4px, @spread: 0, @color: fade(#000, 10%), @inset: false) {
box-shadow: ~"@(inset) @(x) @(y) @(blur) @(spread) @(color)";
}
为什么 @inset 必须是布尔值而非字符串
如果把 @inset 设成字符串（如 @inset: "inset"），调用时就得每次传 "inset" 或 ""，极易出错；而布尔值配合插值 ~"@(inset)"，Less 会自动转成 inset 或空字符串，语义清晰且不易误传。
- 错误写法：
.shadow(..., @inset: "inset")→ 调用时漏传或传错类型，编译可能不报错但结果为空 - 正确写法：
@inset: false→~"@(inset)"在false时输出空格，不影响语法合法性 - 注意：CSS 中
inset关键字前必须有空格，所以~"@(inset) @(x)..."的空格位置不能省
组合使用 .shadow() 和 .rounded() 时的常见失效
阴影被圆角“硬裁剪”，边缘发虚或出现锯齿，不是 Mixin 写错了，而是浏览器渲染机制限制：border-radius 对元素矩形区域裁剪，box-shadow 按原始尺寸扩散后再裁剪。
- 必须确保
@radius≥@blur + @spread，否则阴影部分被截断 - 比如用了
.shadow(@y: 4px, @blur: 12px, @spread: 2px)，那对应.rounded(14px)是底线，12px 就不够 - 建议在 Mixin 注释里加校验提示：
// ⚠️ @radius should >= @blur + @spread when used together - 不要指望用
overflow: hidden补救——它只裁内容，不改阴影绘制逻辑
多层阴影怎么用变量+Mixin 协同管理
box-shadow 支持逗号分隔的多组值，但 Less 里不适合拆成多个变量再拼接（CSS 不支持运行时字符串拼接）。推荐两种方式：
- 语义化单变量：在
:root或变量文件里定义完整值，如--shadow-floating: 0 4px 12px rgba(0,0,0,.1), inset 0 -2px 4px rgba(0,0,0,.05);，然后 Mixin 内部用box-shadow: var(--shadow-floating); - 参数化多层：写一个
.shadow-layered()Mixin，接受两组参数，分别生成外层和内层，用~"@(outer), @(inner)"拼接——但仅限简单组合，复杂层级仍推荐语义变量 - 避免陷阱：
calc(var(--x) + "px")这类写法无效，CSS 函数不支持字符串运算
真正难的不是怎么写出来，而是每次调用前是否检查了 @blur + @spread 和 @radius 的数值关系——这个约束不会报错，但会在视觉上悄悄破坏设计一致性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
