border-image + linear-gradient 是最直接的方案，适用于支持该属性的现代浏览器，通过 transparent 边框占位、border-image 引入渐变、border-image-slice: 1 拉伸实现，天然兼容 border-radius。
border-image + linear-gradient 是最直接的方案
如果你只需要基础渐变边框、且目标浏览器支持 border-image（Chrome 15+、Firefox 15+、Safari 6.1+、Edge 79+），这是代码最少、语义最清晰的方式。它不依赖伪元素或遮罩，也不需要额外 DOM 结构。
关键点在于三步：设透明边框占位 → 用 border-image 引入渐变 → 用 border-image-slice: 1 确保渐变完整拉伸到边框区域。
-
border: 4px solid transparent必须写，否则border-image没有作用区域 -
border-image: linear-gradient(45deg, #ff7a00, #9c4dde) 1中的1表示“不切片、全图拉伸”，不是百分比也不是像素值 - 圆角天然兼容：
border-radius: 12px会同时作用于边框和渐变图像，无需额外处理 - 注意 Safari 对
conic-gradient作为border-image的支持较晚（iOS 16.4+/macOS 13.3+），线性渐变更稳妥
mask + background 方案适合精细控制边框形状
当你要实现内凹圆角、不规则厚度、或需要 hover 时动态切换渐变方向，mask 方案更灵活。它的核心是用两个遮罩层做布尔运算，只保留 border 区域显示背景渐变。
常见错误是漏写 -webkit-mask-composite: xor 或写错顺序——Chrome/Safari 必须用 xor，Firefox 用 exclude，两者缺一不可。
-
-webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0)：第一个遮罩覆盖内容+内边距，第二个覆盖整个伪元素 -
mask-composite: exclude在 Firefox 中生效，但 Chrome 无视它，必须靠-webkit-mask-composite: xor - 伪元素需加
pointer-events: none，否则会拦截点击事件 - 如果父元素有
overflow: hidden，要确保伪元素的inset: 0不被裁剪——可改用top/bottom/left/right: -4px（边框宽度）并设z-index: -1
background-clip: border-box 容易忽略的裁剪陷阱
这个方案代码简洁，但实际中常因背景溢出导致“渐变渗入内容区”。根本原因是 background-clip 只控制绘制区域，不控制背景起始位置。
最稳写法是双背景叠加：background: linear-gradient(white, white) padding-box, linear-gradient(45deg, #ff7a00, #9c4dde) border-box。前者填满内区，后者只在边框显示。
-
background-origin: border-box必须显式声明，否则某些浏览器默认从padding-box起始，导致渐变偏移 - 该方案对
border-radius支持良好，但若元素含子元素且设置了transform，可能触发层叠上下文，遮挡边框效果 - 不适用于 border 非矩形场景（如
border-top单边渐变），此时只能用伪元素或border-image
伪元素外扩方案最兼容但要小心定位偏移
当你需要支持 IE11 或旧版 Android 浏览器时，伪元素外扩是最稳妥的选择：用 ::before 绘制一个略大的渐变框，再通过负 margin 或 inset 偏移模拟边框。
典型错误是直接写 top: -2px; left: -2px 却忘了 right 和 bottom，导致响应式下边框右侧/底部缺失。
- 推荐用
inset: -2px（等价于四边同时偏移），比分别写四个方向更可靠 - 伪元素必须设
z-index: -1，否则会盖住内容；若父元素已有z-index，需确保层级关系正确 - 圆角需在伪元素上重复写
border-radius: inherit，否则 Safari 可能渲染直角 - 动画性能较好，
background-position移动渐变比重绘 mask 更轻量
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
