border-image 与 border-radius 不能共存是因 css 规范未定义协同机制：border-image 按原始矩形渲染，不参与圆角裁剪，导致圆角处被硬切、不显示或拉伸断裂。
border-image 和 border-radius 为什么不能共存
不是写法错了，也不是漏了前缀，是 CSS 规范本身没定义两者怎么协同。W3C 明确规定：border-image 不参与圆角裁剪——它始终按原始矩形区域渲染，而 border-radius 只影响边框的「视觉裁剪」和「事件响应区域」，但不会去变形或重采样 border-image 的贴图。结果就是：圆角区域里，border-image 要么被硬切掉（Safari 常见），要么直接不显示（Chrome/Firefox 某些版本），要么在拐角处拉伸断裂。
哪些场景下失效最明显
实际开发中，这几个组合最容易翻车：
-
border-image: linear-gradient(...)+border-radius: 8px—— 渐变边框一加圆角就只剩直角段 - 用 SVG 或 PNG 作为
border-image-source，且图片本身不含圆角信息 —— 拐角处必然出现锯齿或空白 - 在 iOS Safari 或 macOS Safari 16 以下版本中使用
border-image-slice: 1—— 圆角区域完全不绘制边框 - 元素同时设置了
overflow: hidden—— 这会进一步强化裁剪，让本就不稳定的圆角表现雪上加霜
为什么伪元素方案比 background-clip 更可靠
很多人试过 background-clip: border-box + background-image 模拟渐变边框，但问题在于：它依赖元素自身有足够内边距撑出“边框空间”，且一旦元素有背景色或背景图，就会遮挡模拟边框。伪元素方案（如 ::before）胜在隔离性：
- 主元素只管
border-radius和内容，不碰边框逻辑 - 伪元素绝对定位、尺寸略大（比如
width: calc(100% + 2px)），再用transform: translate(-1px, -1px)微调对齐，能稳住圆角边缘 - Retina 屏下若模糊，加
transform: scale(0.5); transform-origin: 0 0;配合image-rendering: pixelated;可修复采样失真 - 不需要担心
background-clip和background-origin的兼容细节，IE11+、Safari 12.1+ 全支持
clip-path 方案的隐藏代价
clip-path: inset(0 round 8px) 看似简洁，但它不是“画边框”，而是“裁内容”。这意味着：
- 鼠标事件仍作用于整个矩形区域（圆角外的透明区仍可点击），不符合语义预期
- 无法实现真正的「描边宽度」控制——你只能裁出形状，没法指定边框是 2px 还是 4px
- Android WebView 和旧版 Safari 对
inset(round)支持不稳定，容易退化为矩形裁剪 - 如果元素有
box-shadow，阴影也会被一起裁掉，得额外用伪元素再叠一层阴影
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
