svg背景比border-image更稳，因其缩放不模糊、颜色可内联、无额外http请求，且不受border-image-slice裁剪逻辑干扰；而border-image在ios 14以下webview中易因stretch渲染抖动导致边框断裂，尤其圆角容器内容易露白。
为什么SVG背景比border-image更稳
SVG作为矢量图，缩放不模糊、颜色可内联、无额外HTTP请求，且不受border-image-slice裁剪逻辑干扰。而border-image在iOS 14以下 WebView 中常因stretch渲染抖动导致边框断裂，尤其圆角容器里容易露白。
单边边框：用background-image + linearGradient SVG
直接写内联SVG，避免外部文件加载失败或CORS问题。下边框示例：
.border-bottom-1px {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1' width='1'%3E%3Crect fill='%23ccc' x='0' y='0' width='1' height='1'/%3E%3C/svg%3E");
background-repeat: repeat-x;
background-position: bottom;
background-size: 100% 1px;
}
-
height='1'和width='1'确保SVG本身是1物理像素单位，不依赖DPR适配 -
fill='%23ccc'需URL编码，否则#会被截断；颜色可动态替换为var(--border-color)（现代浏览器支持） - 必须设
background-size: 100% 1px，否则高DPR设备下会拉伸成2px+，失去“1物理像素”意义
四边边框：用multiple backgrounds叠四层SVG
不能只靠一个SVG画四边——那样会强制拉伸变形。正确做法是用四层独立背景，分别控制上下左右：
.border-1px {
background-image:
linear-gradient(to right, #ccc 50%, transparent 50%),
linear-gradient(to right, #ccc 50%, transparent 50%),
linear-gradient(to bottom, #ccc 50%, transparent 50%),
linear-gradient(to bottom, #ccc 50%, transparent 50%);
background-size: 100% 1px, 100% 1px, 1px 100%, 1px 100%;
background-position: left bottom, right bottom, left top, left bottom;
background-repeat: no-repeat;
}
- 第一层：左底 → 右底（下边框）
- 第二层：右底 → 右顶（右边框），靠
background-position: right bottom锚定右下角 - 第三层：左顶 → 左底（左边框），
background-position: left top起始点 - 第四层：左底 → 右底（上边框？错！其实是下边框二次覆盖）→ 实际应为
left top起始的顶部线，但注意顺序：上/左必须在下/右之前声明，否则被遮挡
更稳妥的写法是用SVG data URL替代linear-gradient，避免Safari对渐变50%的子像素舍入误差。
圆角+边框组合时的关键避坑点
SVG背景本身不支持border-radius裁剪，强行加会导致边框在圆角处断开或溢出。必须靠父容器兜底：
- 父元素设
border-radius: 6px+overflow: hidden，让SVG背景被裁剪 - 绝对不要给SVG背景层加
border-radius，它只作用于内容区，对background-image无效 - 若容器有
padding，需同步调整background-position，例如background-position: left calc(100% - 1px)来对齐底边 - 在
transform: scale(1.5)的缩放容器中，SVG背景会跟着放大——此时必须用background-size: calc(100% / 1.5) calc(1px / 1.5)反向修正，否则又变粗
真正难的不是写出SVG，而是所有background-size、background-position、overflow三者必须咬死配合；漏掉任意一个，圆角边框就大概率在iPhone 15 Pro或折叠屏上裂开。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
