border-radius 对 border-image 无效是规范行为，因 w3c 规定仅 background 被圆角裁剪，border-image 作为贴图直角铺满；伪元素或 mask 是保圆角的可靠方案，但需同步维护 border-radius 值。
border-radius 在 border-image 下失效，不是 bug，是规范行为。
border-image 无视 border-radius 是 W3C 明确规定的
W3C 规范写得很清楚：只有背景（background）会被裁剪到圆角边缘，而 border-image 不参与这个裁剪过程。它被当成一张“贴图”，原样铺满四边矩形区域，哪怕你写了 border-radius: 12px，浏览器也只对内容区和背景做圆角处理，border-image 依然直角拉伸、硬切、不弯曲。
这意味着：
- 圆角处的渐变边框会露出尖角或被裁掉一部分
- 某些浏览器（如 Safari）甚至直接不渲染圆角区域的边框内容
- 加
overflow: hidden也救不了——它只裁内容和背景，不裁border-image
为什么 background-clip + transparent border 看似有效但仍有坑
这个方案本质是“骗视觉”：用透明边框占位，再让背景色从 padding 区透出来，看起来像渐变边框。但它依赖两个关键前提：
-
padding必须 ≥border-width，否则background-clip: padding-box没空间可剪，背景直接消失 -
background必须是元素自身的，不能靠父级背景“透过来”——否则圆角裁剪发生在父级，子元素边框位置还是直角 - 如果元素有内边距（
padding）或内容撑开高度，background-clip: padding-box会导致渐变在 padding 区内平铺，而非严格沿边框路径流动
真正保圆角的方案只有伪元素或 mask
想让渐变边框和 border-radius 同时生效，必须脱离 border 体系本身：
- 用
::before绘制一个稍大的渐变块（宽高 = 元素宽高 + 2×边框宽），设border-radius相同值，再用主元素盖住中间区域 - 用
mask裁剪渐变背景：给元素设background: linear-gradient()，再用mask: radial-gradient(circle at center, black 50%, transparent 51%)模拟边框环形区域——但 Safari 对mask的支持直到 2026 年仍不稳定，部分版本会完全不渲染 - 别碰
clip-path: inset(0 round Xpx)配border-image：它确实能“遮出”圆角外形，但内部渐变仍是直角贴图，缩放或动画时极易错位
最常被忽略的一点：所有“模拟边框”的方案，都要求你手动同步主元素和伪元素/遮罩的 border-radius 值。一旦设计稿改了圆角尺寸，漏改某一处，就会出现“边框突兀收口”或“圆角溢出”的视觉断裂。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
