必须用mask配合mask-composite才能实现真正圆角的渐变边框，因为border-image完全无视border-radius的裁切逻辑，导致四角凸出；mask通过遮罩合成精准“抠”出圆角轮廓，结合exclude或source-out实现干净镂空效果。
直接用 border-image + border-radius 做不出真正圆角的渐变边框——它会四角凸出，不是设计稿想要的效果。必须用 mask 配合 mask-composite 才能实现视觉上干净、边缘精准的镂空圆角边框。
为什么 border-image + border-radius 会四角凸出
border-image 渲染时完全无视 border-radius 的裁切逻辑，它把图像按原始矩形区域平铺到 border 区域（含四个直角），而 border-radius 只影响内容区的视觉圆角，不干预边框绘制路径。你看到的是“带直角凸起的渐变边框”，不是“圆角边框”。
常见错误现象：
– 边框四角明显鼓包，尤其在高对比背景上刺眼
– 圆角半径越大，凸出越严重
– 使用 border-image-slice: 1 或 fill 也无效
mask-composite 实现镂空圆角边框的核心写法
本质是：用一个带圆角的遮罩层，把渐变背景“抠”出圆角轮廓，再叠加到目标元素上。关键不是改边框，而是控制遮罩合成方式。
立即学习“前端免费学习笔记（深入）”；
- 必须用伪元素（如
::before）承载渐变背景和 mask，不能直接加在容器上 - 遮罩需两层：
content-box（保留内容区）+border-box（覆盖边框区），否则边缘发虚或漏底 -
mask-composite: exclude是核心，Chrome/Edge 支持；Safari 目前只认-webkit-mask-composite: source-out，且行为等效 - mask 图像推荐用
linear-gradient(#fff 0 0)，简洁可控，避免 SVG 加载延迟或尺寸失配
示例片段：
.rounded-border {
position: relative;
}
.rounded-border::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(45deg, #3a86ff, #8338ec);
border-radius: 12px;
-webkit-mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0) border-box;
-webkit-mask-composite: source-out;
mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0) border-box;
mask-composite: exclude;
}
兼容性与 fallback 处理要点
截至 2026 年 6 月，mask-composite 在 Safari 中仍需 -webkit- 前缀，且仅支持 source-out；Firefox 尚未实现该属性。这意味着不能指望它在所有环境稳定生效。
- 务必为不支持的浏览器提供降级方案，例如纯色圆角边框：
border: 2px solid #ccc; border-radius: 12px; - 不要依赖
mask做关键信息展示——它不可访问，且打印时通常不渲染 - 若需支持 iOS 16 以下设备，建议用 SVG
<mask>内联方式替代 CSS mask，但会增加 HTML 复杂度 - 性能上，
mask层会触发额外合成，复杂动画中注意避免频繁重绘
真正难的不是写出那几行 mask 代码，而是判断什么时候该用它、什么时候该绕开——比如简单圆角纯色边框，border-radius 仍是首选；只有当设计明确要求“渐变 + 圆角 + 透明内衬”三者共存时，mask 方案才不可替代。
