border-image 是唯一原生支持渐变边框的方案，但必须同时满足四条件：border: 宽度 solid transparent；border-image-source 为渐变；border-image-slice: 1；border-image-repeat: stretch。
直接写 border-color: linear-gradient() 无效，浏览器会忽略它——这不是语法错误，而是 CSS 规范根本不允许 border-color 接收渐变值。真要实现渐变边框，border-image 是唯一原生支持的方案，但必须配齐四个硬性条件，缺一不可。
为什么 border-image: linear-gradient() 总是不显示渐变
常见错误现象：写了 border-image: linear-gradient(to right, #ff6b6b, #4ecdc4)，但边框仍是灰色、透明或 fallback 的纯色；控制台无报错，效果却完全不对。
- 根本原因：只写简写属性
border-image而不带slice值（如1），浏览器会按默认border-image-slice: 100%处理，把渐变图切成九宫格，中间区域被裁掉，只剩四角小色块 -
border必须显式声明宽度和样式（如border: 4px solid transparent），否则没有“边框盒”供图像贴附；若写成border: 4px solid #000，纯色会盖住渐变 -
border-image-source必须显式存在，不能依赖简写隐含；Safari 17.4 及更早版本仍不支持渐变作为border-image-source，会直接退回到border-color
border-image 实现渐变边框的最小必要配置
这四条必须同时存在，顺序可调，但值必须匹配：
-
border: <width> solid transparent</width>—— 宽度建议 ≥ 2px，transparent是关键，否则渐变不可见 -
border-image-source: linear-gradient(to right, #ff6b6b, #4ecdc4)—— 方向优先用to right或to bottom；避免45deg或to bottom right，否则四边颜色错位（上边不是起点色，右边却是） -
border-image-slice: 1—— 必须是数字1（无单位），表示整张渐变图完整拉伸填充边框；0、100%或省略都会导致裁切失效 -
border-image-repeat: stretch—— 显式声明，避免旧版 Chrome 默认repeat在小尺寸卡片上出现重复色块接缝
可直接复制的最小可用示例：
div {
border: 4px solid transparent;
border-image-source: linear-gradient(to right, #ff6b6b, #4ecdc4);
border-image-slice: 1;
border-image-repeat: stretch;
}
border-image 遇到 border-radius 就断裂？这是设计限制
不是你代码写错，是规范层面不兼容：边框渐变图按矩形边框绘制，border-radius 只裁剪内容区，不重映射渐变纹理。结果就是圆角处常出现硬边、空白或色块偏移。
- 加了
border-radius: 12px后，渐变边框在四角会被裁切、拉伸失真，甚至完全消失 - 不要指望
border-image自动适配圆角——它本质上不支持；测试时务必检查各端圆角交界处是否锯齿、露白或颜色跳变 - 若必须保圆角，应切换至伪元素方案：
::before绘制稍大的渐变背景框，主元素用background-clip: padding-box遮住中间，父容器需设position: relative
Safari 兼容性与替代路径的取舍
截至 2026 年 8 月，Safari（包括 iOS 17.6 / macOS 14.6）仍不支持 linear-gradient() 作为 border-image-source，会静默回退到 border-color。这意味着：
- 若目标用户含 Safari 用户（尤其移动端），
border-image方案等于白写；此时伪元素法是唯一可靠选择 -
box-shadow: 0 0 0 2px linear-gradient()是常见 hack，但它本质是外发光，无法内嵌、不能响应border-width变化，且圆角处易模糊溢出 - 动画需求下，
border-image不支持transition渐变色，只能靠 JS 切换 class；伪元素法则可对background-position做平滑过渡
真正容易被忽略的点是：渐变方向必须匹配边框方位，且 border-image-slice: 1 这个“1”不能加单位、不能写成字符串、不能省略——它不是百分比，也不是像素值，就是一个字面量数字。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
