border-image 显示纯色而非渐变，是因为渐变需通过 border-image-source: linear-gradient() 显式声明且配合 border-image-slice: 1，否则浏览器回退到 border-color；Safari 当前不支持该特性，圆角下更易断裂，推荐伪元素或 box-shadow 替代方案。
border-image 为什么总显示成纯色而不是渐变
因为 border-image 默认会把图片拉伸或平铺，而你给的渐变背景（比如 linear-gradient）如果没有显式设为图像源，浏览器根本不会当它是一张“图”。CSS 中的渐变函数本身不是图片，必须用 border-image-source 显式包裹一层 image() 或直接用 border-image 简写时带上 gradient 关键字——但注意：只有现代浏览器支持渐变作为 border-image-source 的值。
常见错误现象：
– 写了 border-image: linear-gradient(...); 却没生效
– 边框颜色还是 fallback 的 border-color
– 控制台没报错，但效果完全不对
- 必须用
border-image-source+linear-gradient，不能只靠border-style或border-color - 要配
border-image-slice: 1（否则渐变会被切成 9 宫格，中间区域裁掉，只剩边角） - Chrome/Edge 110+、Firefox 115+ 支持渐变作
border-image-source；Safari 目前（v17.4）仍不支持，会退回到border-color - 示例：
border-image-source: linear-gradient(45deg, #ff6b6b, #4ecdc4);<br>border-image-slice: 1;<br>border-width: 8px;
如何让 border-image 渐变贴合圆角（border-radius）
直接加 border-radius 和 border-image 一起用，渐变边框大概率会在圆角处断裂、错位甚至消失——因为 border-image 是基于边框盒模型绘制的，而 border-radius 会裁剪内容，但不自动重映射渐变纹理。
- 唯一可靠方式：把渐变画在父容器的
::before或::after伪元素上，用绝对定位模拟边框，并手动控制圆角 - 不要依赖
border-image自动适配border-radius，它本质上不支持 - 如果非要用
border-image，至少确保border-image-slice: 1，并测试各端圆角交界处是否出现锯齿或色块偏移 - 性能影响：伪元素方案多一层渲染层，但比 JS 修补稳定；
border-image方案在 Safari 上基本无效，等于白写
替代方案：用 box-shadow 模拟渐变边框是否靠谱
可以，但仅限单色渐变或简单方向（如左右/上下），且无法实现真正「边框级」的细粒度控制（比如只给上边加渐变、右边加虚线混合）。
-
box-shadow: 0 0 0 2px linear-gradient(...)是最常用 hack，但本质是外发光，无法内嵌、不能响应border-width变化 - 多层
box-shadow可模拟多段渐变，但层级一多就难维护，且和真实边框的盒模型行为不一致（比如会影响outline、clip-path计算） - 不支持
border-style类型（如dashed、dotted），没法跟原生边框对齐 - 兼容性好（所有现代浏览器都行），适合快速原型，但上线前务必检查高缩放比下是否模糊或断层
实际项目里该选哪个方案
看目标环境和设计需求强度。如果设计稿明确要求「带圆角的斜向双色渐变边框」且需支持 Safari，别碰 border-image——它现在就是个半成品特性。
- 纯 Chrome/Edge 内部系统：用
border-image-source: linear-gradient()+border-image-slice: 1最干净 - 对外公开网站、需兼容 Safari：用伪元素 +
background: linear-gradient()+border-radius手动定位，可控性强 - 只要视觉近似、不苛求像素级还原：多层
box-shadow最省事，但记得加inset配合z-index控制内外顺序 - 最容易被忽略的一点：无论哪种方案，都要在
transform: scale()或zoom场景下单独测试，渐变纹理极易在缩放后失真或错位
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
