border-image圆角失效是因渲染优先级高于border-radius且切片不感知圆角；可行解法包括：背景渐变+background-clip:padding-box、伪元素覆盖、或mask-image（新浏览器）。
border-image 为什么圆角失效？
直接用
配合渐变，再加
，你会发现圆角处的边框“被裁掉”或颜色错位——这不是 bug，是规范行为。
的渲染优先级高于
，且其切片（slice）默认从边框区域中心向内裁剪，不感知圆角弧度。
关键点在于：
（或带单位的值）会让切片从边框边缘开始计算，但依然无法让渐变边框自然贴合圆角；真正可行的解法是绕过
的渲染限制。
必须设置
（哪怕只是
），否则
不生效
可避免内容区被误裁，但不解决圆角过渡问题
渐变本身用
或
均可，但方向需匹配边框走向（如上/右/下/左）
background-clip: padding-box 是更稳的选择
用背景渐变 +
模拟“带圆角的渐变边框”，实际是把渐变画在 padding 区域，再用
和
配合留出视觉边框空间。它天然尊重
，无裁切失真。
典型结构：外层容器设
和
，内层内容用
抵消 padding，再把渐变背景应用在外层。
立即学习
“
前端免费学习笔记（深入）
”；
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
必须显式声明，否则渐变可能从 content-box 起始，导致偏移
如果容器有
，需确保它不覆盖渐变；可用
分层
此方案在 Safari 15.4+、Chrome 100+、Firefox 95+ 表现一致；旧版 Safari 对
的
支持不稳定
伪元素 + 渐变背景是最兼容的方案
当需要支持 iOS Safari 14 或 Android Webview 等旧环境时，
可能失效。此时用
伪元素覆盖一层带圆角和渐变的背景，再通过
和
控制位置，是最可控的方式。
比
更简洁，且自动继承父级
必须加
，否则伪元素圆角超出容器时会显示溢出部分
若容器本身有背景色，伪元素需设
避免意外混合
border-image + mask-image 是未来但需谨慎
Chrome 115+ 和 Safari 16.4+ 开始支持用
对
做二次裁剪，从而实现圆角渐变边框。但它目前不是跨浏览器方案，仅适合实验性项目或明确控制运行环境的场景。
注意：
的
中 “corner” 并非标准关键字，实际需写死四个角的坐标（如
），且每个角的圆角半径需手动匹配
值。
这个路径目前只适合已知用户设备版本、且愿意承担维护成本的团队；普通业务中，伪元素方案仍是平衡兼容性与可控性的最优解。
border-imageborder-radiusborder-imageborder-radiusborder-image-slice: 1border-imageborder-width1pxborder-imageborder-image-slice: 1linear-gradientconic-gradientbackground-clip: padding-boxpaddingbackground-colorborder-radiusborder-radiuspaddingmargin: -Npxdiv {
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-boxbackground-colorbackground: linear-gradient(...) padding-box, #fff content-boxbackground-clippadding-boxbackground-clip::beforez-indexinsetdiv {
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: -2pxtop/left/bottom/right: -2pxborder-radiusoverflow: hiddenbackground-blend-mode: normalmask-imageborder-imagediv {
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-imageradial-gradientcircle at top leftborder-radius