border-image圆角失效是因渲染优先级高于border-radius且切片不感知圆角；可行解法包括：背景渐变+background-clip:padding-box、伪元素覆盖、或mask-image（新浏览器）。
border-image 为什么圆角失效？
直接用 border-image 配合渐变，再加 border-radius，你会发现圆角处的边框“被裁掉”或颜色错位——这不是 bug，是规范行为。border-image 的渲染优先级高于 border-radius，且其切片（slice）默认从边框区域中心向内裁剪，不感知圆角弧度。
关键点在于：border-image-slice: 1（或带单位的值）会让切片从边框边缘开始计算，但依然无法让渐变边框自然贴合圆角；真正可行的解法是绕过 border-image 的渲染限制。
- 必须设置
border-width（哪怕只是1px），否则border-image不生效 -
border-image-slice: 1可避免内容区被误裁，但不解决圆角过渡问题 - 渐变本身用
linear-gradient或conic-gradient均可，但方向需匹配边框走向（如上/右/下/左）
background-clip: padding-box 是更稳的选择
用背景渐变 + background-clip: padding-box 模拟“带圆角的渐变边框”，实际是把渐变画在 padding 区域，再用 padding 和 background-color 配合留出视觉边框空间。它天然尊重 border-radius，无裁切失真。
典型结构：外层容器设 border-radius 和 padding，内层内容用 margin: -Npx 抵消 padding，再把渐变背景应用在外层。
立即学习“前端免费学习笔记（深入）”；
div {
border-radius: 12px;
padding: 2px; /* 视觉边框宽度 */
background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
background-clip: padding-box;
background-origin: padding-box;
}
div > * {
margin: -2px; /* 抵消 padding，保持内容尺寸不变 */
}-
background-origin: padding-box必须显式声明，否则渐变可能从 content-box 起始，导致偏移 - 如果容器有
background-color，需确保它不覆盖渐变；可用background: linear-gradient(...) padding-box, #fff content-box分层 - 此方案在 Safari 15.4+、Chrome 100+、Firefox 95+ 表现一致；旧版 Safari 对
background-clip的padding-box支持不稳定
伪元素 + 渐变背景是最兼容的方案
当需要支持 iOS Safari 14 或 Android Webview 等旧环境时，background-clip 可能失效。此时用 ::before 伪元素覆盖一层带圆角和渐变的背景，再通过 z-index 和 inset 控制位置，是最可控的方式。
div {
position: relative;
border-radius: 12px;
overflow: hidden;
}
div::before {
content: '';
position: absolute;
inset: -2px; /* 向外扩展 2px 形成边框厚度 */
border-radius: inherit;
background: linear-gradient(45deg, #6a11cb, #2575fc);
z-index: -1;
}-
inset: -2px比top/left/bottom/right: -2px更简洁，且自动继承父级border-radius - 必须加
overflow: hidden，否则伪元素圆角超出容器时会显示溢出部分 - 若容器本身有背景色，伪元素需设
background-blend-mode: normal避免意外混合
border-image + mask-image 是未来但需谨慎
Chrome 115+ 和 Safari 16.4+ 开始支持用 mask-image 对 border-image 做二次裁剪，从而实现圆角渐变边框。但它目前不是跨浏览器方案，仅适合实验性项目或明确控制运行环境的场景。
div {
border: 4px solid transparent;
border-image: linear-gradient(45deg, red, blue) 1;
-webkit-mask-image: radial-gradient(circle at corner, black 0%, black 12px, transparent 12px);
mask-image: radial-gradient(circle at corner, black 0%, black 12px, transparent 12px);
}注意：mask-image 的 radial-gradient 中 “corner” 并非标准关键字，实际需写死四个角的坐标（如 circle at top left），且每个角的圆角半径需手动匹配 border-radius 值。
这个路径目前只适合已知用户设备版本、且愿意承担维护成本的团队；普通业务中，伪元素方案仍是平衡兼容性与可控性的最优解。
