border-image 不适合封装成通用 Less mixin，因其子属性强耦合、渐变支持差、浏览器兼容性低且无法动态计算参数；推荐用伪元素+background+clip-path实现可控边框效果。
直接说结论：border-image 在 Less 中**不适合封装成通用混合宏（mixin）**，因为它的语法结构、浏览器兼容性、渐变支持限制和参数耦合度远超常规边框逻辑——强行封装反而增加出错概率，且多数场景有更可控的替代方案。
为什么 border-image 不适合用 mixin 封装
Less 的 mixin 本质是样式块复用，但 border-image 的四个子属性（border-image-source、border-image-slice、border-image-width、border-image-outset、border-image-repeat）彼此强依赖，任意一个值变动都会影响整体渲染效果：
-
border-image-source必须是图像（url()或image()），而linear-gradient()在大多数浏览器中仍不被当作合法图像源（Chrome 124+ 开始部分支持，但 Safari/FF 仍不稳定） -
border-image-slice若设为1，会把渐变切成 9 宫格，顶/底边变成重复平铺的小段，不是连续渐变 - 想让上边是水平渐变、右边是垂直渐变？
border-image不支持 per-side 渐变定义，所有边共用同一张“图” - Less 无法在 mixin 中动态拼接
@keyframes名称，同理也无法安全生成带计算的border-image-slice值（比如根据边框厚度自动推导）
真正可用的替代方案：伪元素 + background + clip-path
当你要实现「单边双色渐变」「不规则边框形状」「带圆角的渐变边框」时，应放弃 border-image，改用伪元素模拟边框区域：
- 用
&::before覆盖顶部，&::after覆盖底部，各自设置background: linear-gradient()+background-size: 100% @thickness+background-position: top/bottom - 必须给宿主元素加
position: relative，否则伪元素定位失效 - 若容器有
border-radius，伪元素也得同步加，否则圆角处露白边 - 左右边需另起两组伪元素，或统一用四方向版本（共 4 个
::before/::after变体）
如果非要用 border-image，只封装最简安全模式
仅限静态图片边框（如图标边框、纹理贴图），且明确约束浏览器范围（如仅支持 Chrome ≥125 + Edge ≥125）：
立即学习“前端免费学习笔记（深入）”；
.border-image-static(@src, @slice: 20, @width: 1px, @repeat: stretch) {
border-image-source: @src;
border-image-slice: @slice;
border-image-width: @width;
border-image-repeat: @repeat;
}
- 禁止传入
linear-gradient()作为@src—— 编译无报错，但运行时多数浏览器直接忽略 -
@slice推荐固定为整数（如20），避免用@slice: 20%，百分比在不同尺寸容器下行为不一致 - 不封装
border-image-outset—— 它会让边框脱离容器边界，极易破坏布局流，且无法通过伪元素模拟
真正难的不是写对一行 border-image，而是它一旦生效，就绕过了 CSS 盒模型的正常计算逻辑；调试时看不到边框盒，控制台也不报错，只能靠肉眼比对像素。所以除非项目明确要求兼容某类旧图素材，否则优先走伪元素路径。
