结论：用 border-image 实现移动端极细分割线，核心是绕过 1px 物理像素限制，通过 1px 高图片 + border-image-slice: 1 + repeat 平铺，比伪元素缩放等方案更稳定无锯齿；需显式声明 border-width 和 border-style，slice 必须为数值 1（非 0 或百分比），并添加 solid fallback。
直接说结论：用 border-image 实现移动端极细分割线，核心不是“调细”，而是“绕过 1px 物理像素限制”，靠一张 1px 高的图片 + border-image-slice 精准控制显示区域，再配合 border-image-repeat: repeat 横向铺满——比伪元素缩放、transform: scaleY(0.5) 或 viewport 缩放更稳定、无锯齿、不触发重排。
为什么不用 border: 1px solid #eee？
移动端高倍屏（如 iPhone 的 @2x/@3x）下，CSS 中写的 1px 实际渲染为 2 或 3 个物理像素，视觉上明显偏粗；而设成 0.5px 或 0.33px，多数浏览器会向上取整为 1px，失去意义。设计师要的“头发丝级分割线”，传统 border 无法精确交付。
- 安卓 WebView 和 iOS Safari 对 sub-pixel border 渲染不一致，尤其在滚动或 zoom 后容易模糊或消失
-
border-radius与极细边框组合时，圆角裁切逻辑不可控，边缘常出现毛边 - 使用
transform: scaleY(0.5)会导致文字渲染变细、抗锯齿异常，且需额外处理z-index和点击区域
border-image 实现极细线的关键三步
本质是用一张 1px 高的 PNG（透明背景 + 1px 实色横线），让浏览器把它“贴”在 border 区域，不拉伸、不缩放、只平铺。
-
图片准备：让设计师提供
divider-1px.png，尺寸为640×1（宽度足够覆盖大屏，高度严格为 1px），颜色为所需灰度（如#e0e0e0） -
样式写法：
div.divider { border-width: 1px; border-style: solid; border-color: transparent; border-image-source: url(../images/divider-1px.png); border-image-slice: 1; border-image-width: 1px; border-image-repeat: repeat; } -
必须拆开写
border-width和border-style：iOS Safari 旧版本（尤其是 iOS 12–14）对border: 1px solid transparent的简写解析有 bug，会导致border-image不生效；显式声明可绕过
常见坑：slice 值写成 0 或百分比就失效
border-image-slice 决定图片怎么切出“边框素材”。对 1px 高的图，必须用 1（单位隐含为 px），而不是 0 或 1%：
立即学习“前端免费学习笔记（深入）”；
-
border-image-slice: 0→ 切出的“上/下边”区域为 0，整张图被判定为无效，边框空白 -
border-image-slice: 1%→ 在 1px 高图上等于 0.01px，浏览器四舍五入为 0，同样失效 -
border-image-slice: 1→ 明确告诉浏览器：“从顶部向下切 1px”，刚好取出那条线，其余区域（左右和中间）被忽略
注意：这里 1 是数值，不能带单位；也不能写成 1px（语法错误）。
兼容性与 fallback 处理
所有现代移动端浏览器（Chrome for Android、Safari iOS ≥ 12、Firefox Mobile）均支持 border-image，但部分低端安卓 WebView（如 UC 12.x）可能降级。建议加一层安全 fallback：
div.divider {
border-bottom: 1px solid #e0e0e0; /* fallback */
border-bottom: none;
border-image: url(../images/divider-1px.png) 1 repeat;
border-width: 0 0 1px 0;
border-style: solid;
}这样当 border-image 不支持时，自动回退到普通 1px 边框，不影响基础可用性。
真正难的是 slice 值的直觉——它不是“留多少”，而是“切掉多少”。1px 图上写 1，等于切掉顶部 1px，把剩下“0px 高”的区域当内容丢弃，只留下切口处那一像素线作为边框源。这个反直觉点，几乎每个第一次用的人都会卡住几小时。
