border-image 配合 linear-gradient 是实现彩虹边框最简洁方案，但因 border-image-slice 与 border-radius 渲染机制冲突，Safari 等浏览器中圆角失效或异常，且不支持动画。
直接用
配合
是实现彩虹边框最简洁、语义最正的方案，但它有个硬性前提：必须接受
在部分浏览器（尤其是 Safari）中失效或渲染异常——这不是写法错，是规范限制。
为什么 border-image + linear-gradient 不能可靠支持圆角
根本原因是
（或
）会把渐变当作一张“贴图”切进九宫格，而圆角裁剪发生在 border 绘制之后，两者不协同。即使设置了
，Safari 和旧版 Chrome 可能只对边框内侧圆角，外侧仍为直角；Firefox 表现稍好但仍有断层风险。
表示完整使用渐变图像，不切割，这是目前最通用的取值
加
前缀在 Safari 15.4–16.6 中仍可能触发边框锯齿或颜色偏移
若元素有
，它会压在 border-image 上方，导致光效被遮盖
正确写法与关键参数组合
以下是最小可行代码，已验证在 Chrome 120+、Firefox 115+、Edge 122+ 中稳定生效：
必须显式声明
，否则
无载体
方向建议用角度（如
），比
更易控制流动节奏
后不可跟单位，也不能写成
或
渐变色标建议至少 5 个，太少会导致过渡生硬；避免用纯黑/纯白，易在暗色背景下丢失对比
遇到边框不显示？先查这三件事
90% 的“没效果”问题都出在基础配置上，不是渐变写错了：
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
立即学习
“
前端免费学习笔记（深入）
”；
检查是否遗漏
——
不合法，必须带宽度值
确认父容器没有
，它会裁掉 border-image 的边缘像素
在 Safari 中打开开发者工具 → Elements → Styles 面板，手动勾选/取消
查看是否瞬间出现，若是，说明是前缀或解析顺序问题
想加动画？别动 border-image，改 background-position
本身不支持
，但你可以把它当静态边框，另起一层伪元素模拟流光。更务实的做法是放弃
，改用
+
+
方案——虽然多几行 CSS，但圆角、动画、响应式都可控。
真正难的不是写出彩虹，而是判断什么时候该用
，什么时候该绕开它。如果设计稿明确要求「圆角 + 流光 + 兼容 Safari」，那从一开始就不该选这条路。
border-imagelinear-gradientborder-radiusborder-image-slice: 1fillborder-radiusborder-image-slice: 1-webkit-border-imagebox-shadow.rainbow-border {
border: 6px solid;
border-image: linear-gradient(45deg, #ff0000, #ffa500, #ffff00, #008000, #0000ff, #4b0082, #ee82ee) 1;
border-image-slice: 1;
}
border: solid border-imagelinear-gradient45degto top rightborder-image-slice: 11px100%border-widthborder: solidoverflow: hiddenborder-imageborder-imageanimationborder-imagebackground-imagepaddingclip-pathborder-image