border-image 与 border-radius 同时使用会失效，因 border-image 按矩形区域平铺且无视圆角裁切，导致边框四角凸出；mask 方案通过遮罩精准裁剪渐变层实现真正圆角边框。
为什么直接用 border-image + border-radius 会失效
因为 border-image 渲染时无视圆角裁切逻辑，它把渐变图按 border 区域原始矩形平铺，四个角直接“顶出来”，border-radius 只影响内容区域的视觉圆角，不干预边框图像的绘制路径。你看到的不是“圆角渐变边框”，而是“带直角凸起的渐变边框”。
mask 方案的核心：用遮罩“抠”出圆角轮廓
本质是画一个带圆角的渐变层，再用 mask 把它精准地“扣”在目标区域上——不是靠边框属性，而是靠图层叠加与遮罩裁剪。
-
mask必须作用在渐变背景层（比如伪元素），不能直接加在内容容器上 - 推荐用
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)配合mask-composite: exclude（或mask-composite: xor）来实现“只保留 padding 内侧+border 区域”的效果 - Chrome/Edge 支持
mask-composite，但 Safari 目前只认-webkit-mask-composite，且值为source-out才等效于exclude - 务必设置
content-box和border-box两层 mask 源，否则圆角边缘容易发虚或漏底
实际写法中容易漏掉的关键 CSS 属性
只写 mask 不够，下面这组必须配齐，否则圆角渐变边框会错位、溢出或完全不可见：
-
position: absolute+inset: 0确保伪元素完全覆盖容器 -
z-index: -1让渐变层垫在内容下方，不影响点击和文字渲染 -
padding: Xpx在父容器上预留边框厚度（X 就是你要的边框粗细） -
background-clip: padding-box防止渐变背景误渗入内边距区域 - 如果父容器有
overflow: hidden，要小心它会意外裁掉 mask 边缘——此时改用clip-path: inset(0 round Ypx)更稳妥
兼容性与透明背景的取舍点
用 mask 实现的圆角渐变边框，内容区域可以是透明、图片或任意背景色，这是它比双层嵌套法更灵活的地方。但代价是 Safari 对 mask-composite 支持不一，iOS 16.4+ 才稳定支持 exclude；若需兼容旧版 Safari，得降级用 clip-path + border-image 组合，并接受轻微像素偏移。
立即学习“前端免费学习笔记（深入）”；
真正难处理的不是写法本身，而是当容器宽高不固定、或内部有 flex/wrapping 内容时，mask 的尺寸响应容易失准——这时候别硬调 mask，换成伪元素 + transform: scale() 微调反而更可控。
