border-image 在圆角容器中必然溢出，不是 bug 而是规范行为；它不响应 border-radius 且不会被裁剪，唯一可靠方案是改用 box-shadow 多层模拟边框效果。
border-image 在圆角容器中必然溢出，不是 bug，是规范行为——它不响应 border-radius，也不会被裁剪。想让它“贴合圆角”，唯一可靠路径是放弃 border-image，改用 box-shadow 模拟多层边框效果。
为什么 border-image 无法配合 border-radius
border-image 渲染在 border 区域，但它的切片、平铺、拉伸逻辑完全独立于圆角；即使设置了 border-radius: 12px，border-image 的四个角仍按直角绘制并延伸，Safari 和 Chrome 表现一致（无兼容差异可钻）。常见错误现象包括：渐变边框四角炸开、图案边框在圆角处断裂、边框虚线在弧线段错位。
- 它不受
overflow: hidden影响——因为 border 不属于“内容”范畴，裁剪不生效 -
background-clip对它无效，因为它压根不是 background - 没有
border-image-clip这样的 CSS 属性（CSS 规范未定义）
用 box-shadow 替代 border-image 的实操要点
核心思路：用多个 box-shadow 层叠模拟“带纹理/渐变的边框”，每层控制偏移、模糊、扩展，且天然继承 border-radius。
- 第一层（紧贴边框）：
box-shadow: 0 0 0 2px #655—— 无偏移无模糊，2px 扩展，模拟纯色实线 - 第二层（外发光/纹理感）：
box-shadow: 0 0 4px 3px rgba(101, 85, 85, 0.4)—— 微模糊 + 略宽扩展，制造厚度 - 若需“渐变边框”效果：不用
linear-gradient做border-image，而用两层不同色的box-shadow叠加，例如外层rgba(0, 122, 255, 0.6)，内层rgba(0, 80, 180, 0.9) - 注意顺序：CSS 中后写的
box-shadow层在视觉上更靠前，所以浅色/模糊层建议写在前面，深色/锐利层写在后面
box-shadow 模拟边框时容易忽略的坑
看似简单替换，但几个参数稍不注意就会破功：
-
spread值必须为正数才能向外扩展成“边框”，负值会向内收缩甚至消失 - 若同时用了
outline，它不随圆角，四角仍是直角——别和box-shadow混用，除非你明确需要那种“圆角阴影 + 直角描边”的对比效果 - 在 Safari 中，若元素无背景（
background-color或background-image），box-shadow的圆角渲染可能失效，务必确保有显式背景 - 动画场景下（如
:hover { box-shadow: ... }），避免在blur和spread间剧烈跳变，否则圆角过渡会生硬或闪烁
真正难的不是写对一行 box-shadow，而是理解它和 border-image 根本不在同一个渲染维度——前者是投影，后者是贴图；强行让贴图服从圆角，不如换一套投影语言重写边框语义。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
