纯css渐变边框唯一原生方案是border-image，但需同时设置border-width、border-style和border-image-slice才生效；圆角、图片等场景应改用background+background-clip:padding-box模拟，更稳定可控。
纯 CSS 实现真正意义上的渐变边框，border-image 是唯一原生支持的方案，但它在圆角、图片元素、小尺寸场景下极易失效；绝大多数稳定可用的“渐变边框”效果，其实是用 background + background-clip: padding-box 模拟出来的——不是“假”，而是更可控、更兼容的工程解法。
为什么 border-image 写了没效果
常见现象：加了 border-image: linear-gradient(...)，但边框还是透明或单色。根本原因不是浏览器不支持，而是漏掉了三个强制依赖项：
-
border-width必须显式设置（比如3px），否则没有“画布”可渲染渐变 -
border-style不能是none或未声明，默认值none会直接禁用border-image；必须设为solid、dashed等可绘制样式 -
border-image-slice值必须明确写（常用1），设为0或省略会导致渐变被裁切为纯色
正确写法示例：
div {
border: 3px solid;
border-image: linear-gradient(90deg, #ff6b6b, #4ecdc4) 1;
}注意：这里没写单位的 1 是 border-image-slice 的数值，不是像素。
border-image 遇到 border-radius 就露馅
这不是 bug，是渲染机制决定的：border-image 先把渐变图样铺满整个矩形边框区域，再由 border-radius 对内容区做视觉裁剪——边框本身不参与圆角切割。结果就是四角断开、直角残留、颜色撕裂。
如果你需要圆角渐变边框，别挣扎，直接放弃 border-image。可靠路径只有一条：background + background-clip: padding-box：
- 设
border: 2px solid transparent占位 - 设
padding: 2px（必须 ≥ border-width） - 设
background: linear-gradient(45deg, red, orange) - 关键：加
background-clip: padding-box，否则渐变会铺满整个容器 - 圆角放心加
border-radius，它作用于 padding 区域，自然连贯
给 <img> 加渐变边框不能用 border-image
<img> 是替换元素，浏览器对其边框渲染有特殊限制：border-image 在 Safari 中常被忽略，Chrome 下缩放时错位，设 border-radius 后四角白边明显。这不是你代码问题，是规范层面的兼容性黑洞。
实操推荐外层套容器：
- 用
<div> 包裹 <code><img>，设position: relative - 容器设
border: 2px solid transparent和padding: 2px - 容器背景用
background: linear-gradient(...)+background-clip: padding-box -
<img>设display: block; width: 100%; height: 100%，容器需有明确宽高或aspect-ratio
这样既保留图片原始交互（点击、拖拽），又完全规避替换元素的渲染异常。
outline + blur 只适合快速原型
用 outline 配合 filter: blur() 能快速做出发光感渐变外边框，写法极简：
button {
outline: 2px solid transparent;
background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
background-clip: padding-box;
filter: blur(2px);
}但它本质是模糊拉伸，不是描边：圆角处过渡软但路径不准，响应式缩放时模糊半径失真，且无法精确控制边框粗细与渐变方向。
这种方案只建议用于按钮悬停态、卡片浮层等对精度要求低的临时效果。一旦要上线或适配多端，立刻切回 background-clip 方案。
真正难的不是写出第一行渐变代码，而是判断该用哪条路：要原生支持就咬死 border-image 三要素；要圆角/图片/响应式就拥抱 background-clip；想省事又不怕模糊，outline + blur 能救急——但别在生产环境里留它过夜。
