border-image渐变边框失效主因是默认border-image-slice:100%裁剪掉四边，需设为1；伪元素法更可控兼容性好，但需注意定位、z-index及缩放适配。
border-image 实现渐变边框为什么经常失效
直接用 border-image 套渐变色，常出现边框“断开”“不闭合”或“只显示一角”的问题。根本原因是该属性依赖切片（border-image-slice）默认值为 100%，会把渐变背景整个当做一个图层切掉中心，导致四边无内容。
必须显式设为 1 或 0 才能保留边框区域的完整渲染：
div {
border: 4px solid;
border-image: linear-gradient(45deg, #ff6b6b, #4ecdc4) 1;
}
注意三点：
-
border-width必须明确设置（不能是thin或留空），否则border-image不生效 - 渐变方向建议用角度（如
45deg），避免用to right等关键词——部分旧版 Safari 对关键词解析异常 - 若盒子有圆角（
border-radius），border-image默认不跟随裁剪，需加border-image-slice: 1 fill才能撑满圆角边缘
伪元素覆盖法更可控但要注意层叠顺序
用 ::before 或 ::after 绘制一层带渐变的边框并定位到父容器外侧，本质是“模拟”边框。优势在于完全规避 border-image 的切片逻辑，兼容性更好（IE11+ 都支持）。
关键不是画框，而是精准对齐和留出内容空间：
- 父容器需设
position: relative，伪元素用position: absolute - 伪元素尺寸要比父容器大出两倍边宽（例如边框想 3px，就
width: calc(100% + 6px)），再用top: -3px; left: -3px;拉回覆盖 - 务必设
z-index: -1，否则会盖住子内容；如果父容器已有z-index，伪元素的z-index必须更低（比如-2）才保险 - 若盒子内部有 padding，伪元素的偏移量要同时抵消 padding 和 border 宽度，否则视觉错位
两种方案在高缩放或 Retina 屏下的表现差异
浏览器对 border-image 的像素对齐处理较弱，缩放到 125% 或在 2x 屏上容易出现 1px 模糊或间隙；而伪元素法用 transform: scale() 或直接写物理像素（如 width: 200px）更稳定。
但如果用 vw/vh 或百分比做响应式伪元素，要注意：Firefox 对 calc() 中混合单位（如 calc(100% + 2px)）在某些 zoom 级别下会四舍五入失真，建议统一用 rem 或 JS 动态补正。
真正难搞的是动画场景——border-image 无法过渡渐变色，transition 对它无效；伪元素则可放心对 background 或 opacity 做动画，但要避免对 left/top 动画（触发布局重排）。
要不要加 outline 或 box-shadow 做 fallback
当渐变边框只是装饰、非信息必需时，可以给 border-image 加一层 border: 2px solid #ccc 作为降级；但伪元素法不行——它本身没真实 border，fallback 得靠 outline 或 box-shadow。
选哪个更合适？
-
outline不占布局空间、不触发滚动条，但无法设圆角，且outline-offset在部分安卓 WebView 中支持差 -
box-shadow: 0 0 0 2px #ccc更稳妥，但要注意多重阴影叠加时性能下降，尤其在滚动容器里 - 如果目标环境明确支持
border-image（如现代 Chrome/Firefox），优先用它——代码更简洁，语义更准确
实际项目里，渐变边框往往只是视觉点缀，真正卡住进度的通常是设计师给的“边框要刚好压住内边距文字”这种像素级要求——这时候别纠结方案，直接用伪元素 + 调整 top/left 值硬对齐，比研究切片规则快得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
