纯CSS无法实现真正的彩虹边框，推荐用box-shadow叠加多层单色阴影模拟（兼容性好），或background+mask配合环形渐变SVG（效果精准但需新浏览器）。
纯 CSS 无法直接生成“彩虹边框”这种多色渐变环形效果，border 本身不支持环向渐变；必须用 outline + filter: drop-shadow() 或更可靠的方式：用 box-shadow 叠加多层单色阴影，或（推荐）用 background + mask 模拟边框路径。
用 box-shadow 模拟彩虹边框（兼容性好，实操简单）
这是目前最稳妥的方案，不依赖新特性，所有现代浏览器都支持。原理是叠加 6–8 层不同颜色、相同偏移量的 box-shadow，形成视觉上的环形渐变。
-
box-shadow的spread-radius控制边框粗细，比如8px就是 8px 宽的“边框” - 每层阴影用不同
hsl()色值，按色相（h）等步长递增，例如hsl(0, 100%, 60%),hsl(60, 100%, 60%), ...,hsl(300, 100%, 60%) - 所有阴影的
blur-radius设为0，避免虚化；x/y偏移全为0 - 注意：图必须有明确宽高（或
display: block），否则box-shadow会包不住整图
img.rainbow {
display: block;
width: 200px;
height: 200px;
box-shadow:
0 0 0 4px hsl(0, 100%, 60%),
0 0 0 5px hsl(60, 100%, 60%),
0 0 0 6px hsl(120, 100%, 60%),
0 0 0 7px hsl(180, 100%, 60%),
0 0 0 8px hsl(240, 100%, 60%),
0 0 0 9px hsl(300, 100%, 60%);
}
用 background + mask 实现真正环形渐变（效果最准，但需 Chromium/Edge 111+ 或 Safari 16.4+）
如果项目能接受较新浏览器，这个方案才是语义正确、可缩放、无锯齿的彩虹“边框”。它本质是把一张环形渐变 SVG 当作遮罩，套在图片外层。
- 必须给图片外层加一个
<div>容器，因为mask不能直接作用于<img>元素自身（除非用-webkit-mask+img作为背景） - 遮罩 SVG 的
<circle>半径要略大于图片尺寸，留出边框空间；stroke设为渐变，fill="none" - CSS 中用
mask-image: url(...)或内联mask-image: paint(...)（需 Houdini，暂不实用） - 常见翻车点：忘记设
mask-size: cover和mask-repeat: no-repeat，导致渐变错位
千万别用 border-image（容易白忙活）
border-image 看似合理，但它只拉伸/平铺图像，无法让一张线性渐变图“弯成圆圈”套在四边；即使你用 SVG 画了个环形渐变，border-image-slice: 1 也会把它切成九宫格，四个角必然断裂——这不是 bug，是规范行为。
立即学习“前端免费学习笔记（深入）”；
- 错误示例：
border: 10px solid; border-image: url(rainbow-ring.svg) 1 round;→ 四角出现重复色块或空白 - 哪怕把 SVG 的
viewBox和裁剪区域调得再精准，也无法规避border-image的九宫格机制 - 结论：这个属性天生不适合环形边框，别在这上面耗时间
真正难的不是写几行 CSS，而是判断该用哪条路：要兼容 IE？选 box-shadow 多层法；要高清缩放+动画？上 mask + SVG；想一劳永逸自动适配所有图片尺寸？那就得封装成自定义属性 + JS 计算半径——但多数场景，老老实实用 6 行 box-shadow 就够了。
