多重边框不能用多个border实现，因后者会覆盖前者；outline不支持圆角和独立样式；可靠方案是box-shadow（外边框）加伪元素（内边框或单边控制），less封装需确保逗号分隔、inset位置正确、单位齐全，并推荐可变参数透传原生语法。
多重边框效果不能靠 border 叠加实现，必须用 box-shadow 或伪元素模拟；Less 封装时要优先支持多层、inset、单位一致性，避免逗号遗漏和 inset 位置错误。
为什么不能用多个 border 属性实现多重边框
浏览器只允许一个 border 声明生效，写两行 border: 1px solid #000 后者会覆盖前者；outline 无法控制圆角、不响应 border-radius，且不能设不同颜色/宽度；真正可控的方案只有 box-shadow（外边框）+ 伪元素（内边框或额外层）。
封装 .multi-border() Mixin 时必须处理的三个硬约束
Less 中写多层 box-shadow 容易出错，关键点不是“能不能”，而是怎么让调用者不踩坑：
-
box-shadow每一层之间必须用英文逗号分隔，空格无效；漏逗号会导致仅首层渲染 -
inset必须紧贴每层开头，写成0 0 4px inset rgba(0,0,0,0.2)会整条失效 - 所有长度值（如
2px、0.1rem）必须带单位，传2会被 Less 当作数字参与计算，导致编译后语法错误
推荐的可变参数封装方式（支持任意层数 + inset 混合）
固定参数数量（如 .multi-border(@shadow1, @shadow2)）很快就不够用——按钮要两层，卡片要三层，弹窗还要加内阴影。直接用可变参数接收原生写法最稳：
.multi-border(@shadows) {
box-shadow: @shadows;
}
调用示例：
.multi-border( 0 0 0 1px #e0e0e0, 0 0 0 2px #d0d0d0, inset 0 0 0 1px #f5f5f5 );
这样既保留 CSS 原生语义，又避免 mixin 内部做字符串拼接（易丢空格、括号、逗号）；也不用拆解 x/y/blur/color —— 组合成本太高，维护性差。
需要伪元素补足的场景：单边多重边框 or 不规则圆角
当你要实现「顶部双线 + 底部单线」或「圆角处边框粗细不一致」时，box-shadow 无法 per-side 控制。此时必须用伪元素：
- 宿主元素加
position: relative - 用
&::before覆盖上边，&::after覆盖下边，各自设background+height+top/bottom - 若宿主有
border-radius，伪元素也得同步加，否则圆角交界处露白边 - 不要试图把四边伪元素塞进同一个 mixin —— 方向逻辑耦合太重，建议拆成
.border-top-multi()、.border-bottom-multi()独立封装
真正难的不是写出来，是让别人调用时不查文档就能猜对参数顺序——所以别封装「自动推导 inset」或「智能补逗号」，老老实实把原生语法透传出去，比任何抽象都可靠。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
