真正能落地的css渐变边框方案只有两个：border-image法（适合直角，最简但不支持圆角）和伪元素法（支持圆角与hover动画，需精准定位）。
纯 CSS 没有 border-gradient 这种属性，border-color 也不接受渐变值——直接写 border: 2px solid linear-gradient(...) 会静默失败，浏览器连警告都不抛。真正能落地的方案只有两个：用 border-image 把渐变当贴图“糊”上去，或用伪元素模拟边框形状。选哪个，取决于你是否需要圆角、动画、兼容旧 Safari，还是只想快速上线。
border-image + linear-gradient 是最简方案，但只适合直角
它把 linear-gradient() 当作一张图片塞进边框，靠 border-image-slice: 1 防止九宫格裁剪破坏渐变连续性。关键点不是“怎么写”，而是“漏掉哪项就失效”：
-
border必须显式声明宽度和透明色，比如border: 4px solid transparent；不设transparent，渐变会被实色盖住 -
border-image-slice: 1不能省，缺了它默认是100%，渐变只剩中间一小块 - 边框宽度建议 ≥3px，1px 下渐变容易糊成单色带，尤其在 Retina 屏上
- iOS 15.4 之前 Safari 对
border-image+ 渐变有渲染 bug，可能显示为纯色，需加降级样式（如 fallback 到单色边框）
示例：button { border: 4px solid transparent; border-image: linear-gradient(45deg, #ff6b6b, #4ecdc4) 1; }
伪元素方案适配圆角和 hover 动画，但定位要精准
本质是画一个稍大的渐变层，再用 inset 和 z-index 把它“套”在目标元素外沿。它绕开了 border-image 的圆角失效问题，也支持 transition，但容易因偏移量错位露白边：
- 父容器必须设
position: relative，否则::before无法相对定位 -
inset值要严格等于期望边框宽度，比如想模拟3px边框，就得写inset: -3px -
z-index: -1是底线，设成0或更高会遮挡文字和交互 - 高 DPI 环境（如 Windows 125% 缩放）下像素对齐易出问题，可加
transform: translateZ(0)强制硬件加速缓解
示例：.card::before { content: ""; position: absolute; inset: -3px; z-index: -1; background: linear-gradient(135deg, #8e2de2, #4a00e0); border-radius: 8px; }
transition 无法作用于 border-image，别白费力气
想 hover 时改渐变方向或颜色？别试 transition: border-image——所有主流引擎都把它标为「non-animatable」，写了没反应，控制台也不报错。真要动起来，只能换思路：
- 用伪元素方案，过渡
background-position或opacity（比如淡入淡出） - 或者直接过渡整个
background（适用于background-clip方案），但要注意圆角同步问题 -
border-image场景下强行 animate，结果是 Safari 卡顿、Chrome 跳帧，得不偿失
最常被忽略的是圆角与渐变方向的耦合：伪元素方案里 border-radius 必须和主元素完全一致，差 1px 就会在角落撕裂；而 border-image 根本不认 border-radius，设了也白设。实际项目里，先定死设计稿是否允许直角，再选方案，比后期硬调兼容性更省时间。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
