less变量不能直接用于border-image的url()或linear-gradient()中，会导致编译失败；border-image-width等子属性可安全使用变量；推荐用伪元素+background模拟渐变边框以规避兼容性问题。
border-image 不适合用 Less 变量动态控制
直接在 border-image 中插值 Less 变量（比如 border-image: linear-gradient(...) @width;）会失败，因为 CSS 的 border-image 属性不接受动态单位或颜色计算，且 Less 编译器无法将变量注入到 url() 或 linear-gradient() 函数内部的字符串路径中。
常见错误现象：border-image: url("@{img-path}") 编译后变成字面量 url("@{img-path}")，而非真实路径；或 border-image: linear-gradient(@{color1}, @{color2}) 导致编译报错 Unrecognised input。
- Less 变量只能用于属性值层面（如
color: @primary;），不能穿透进函数参数或 URL 字符串 -
border-image-slice、border-image-width这类数值型子属性可以安全用变量，例如border-image-width: @border-img-width; - 若必须用图片边框，推荐预设几套固定
border-image值，再用.border-image-set(@type)Mixin 分支调用
用伪元素 + background 模拟渐变边框更可控
想实现“带圆角的渐变边框”，border-image 是绕远路——它对 border-radius 支持差，高 DPR 下易模糊，且无法响应式缩放。真正稳定的做法是用 ::before 伪元素模拟边框区域，并通过 background + transform: scale() 控制清晰度。
- 主容器设
position: relative; border-radius: @radius; - 伪元素用
inset: -@border-width;向外撑出边框空间，同时设相同border-radius - 渐变写在伪元素上：
background: linear-gradient(45deg, @color-a, @color-b); - Retina 屏补救：
transform: translateZ(0);触发硬件加速，避免发虚
border-image-width 和 border-width 单位容易混淆
border-image-width 的语法和行为与 border-width 不同：它支持 number（无单位，表示 slice 区域占比）、length（如 2px）、percentage，但不能混用单位做运算，比如 @border-base * 1.5 在这里可能被解析为无效值。
- 合法：
border-image-width: @border-width;（前提是@border-width是纯数字或带单位的 length） - 非法：
border-image-width: (@border-width + 1);（+1 若无单位，结果是无单位数字，可能被浏览器忽略） - 建议统一用
px显式声明：@border-img-width: 3px;，避免依赖上下文推断
多断点下 border-image 切换要靠 Mixin 分支，不是重定义变量
试图在 @media 中改写 @border-image-url 变量然后复用同一段 border-image 声明，不会生效——Less 编译时变量只取初始值，媒体查询里赋值等于没写。
- 正确做法：把整条
border-image规则写进媒体查询内部 - 或封装条件 Mixin：
.border-image-responsive(@breakpoint) when (@breakpoint = desktop) { border-image: url("border-desktop.png") 20; } - 调用时明确传参：
.border-image-responsive(desktop);，避免隐式 fallback
真正难处理的不是写法，而是当设计要求“在 2x 屏上用 @2x 图片边框，1x 屏用普通图”时，border-image 本身不支持 srcset 语义，得靠 JS 或 @supports (-webkit-appearance: none) 配合媒体查询硬切——这时候不如回归伪元素方案，用 background-image + @media (-webkit-min-device-pixel-ratio: 2) 更直白。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
