::after伪元素配合transform: scaley(0.5)是ios上最稳定兼容的1px边框解法；因设备像素比高，css 1px映射为多物理像素导致发虚，0.5px仅ios 13+有限支持，旧版忽略；需严格满足position、height/background、transform-origin、pointer-events四约束。
直接用 ::after 伪元素配合 transform: scaleY(0.5) 是目前 iOS 上最稳、兼容性最好的解法；硬写 border-width: 0.5px 在 iOS Safari 13+ 虽有支持，但旧版（尤其是 iOS 12 及更早）会忽略或四舍五入为 1px，视觉上仍粗且发虚。
为什么 iOS 上 border: 1px 看起来像 2px 或 3px
iPhone 多数机型 window.devicePixelRatio ≥ 2（如 iPhone 8 是 2，iPhone 13 是 3），CSS 的 1px 是逻辑像素，浏览器直接映射为对应数量的物理像素渲染，不做亚像素对齐或降采样。抗锯齿叠加后，边框就显得粗、糊、不锐利。
这不是你代码写错了，是渲染机制决定的。
-
0.5px在 iOS Safari 13+ 才开始有限支持，iOS 12 及以下基本当无效值处理 - 即使写了
border-width: 0.33px（对应 dpr=3），getComputedStyle(el).borderWidth仍返回"1px" - 用
viewport缩放会破坏整个页面布局，字体、间距全乱，不可取
::after + scaleY(0.5) 必须配齐的 4 个约束条件
只写 transform: scaleY(0.5) 不够，漏掉任意一条都可能偏位、露白、拦截点击。
- 父元素必须设
position: relative，否则::after会脱离上下文定位到body -
::after必须用height: 1px+background-color，别用border-bottom: 1px——后者受盒模型影响，缩放后边缘易模糊或错位 -
transform-origin必须显式写成0 100%或left bottom，确保缩放锚点在左下角，避免下边框上浮 - 必须加
pointer-events: none，否则某些 iOS WebView（如微信内置浏览器）会拦截点击事件
示例（底部单边）：
.line-bottom {
position: relative;
}
.line-bottom::after {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 1px;
background-color: #ddd;
transform: scaleY(0.5);
transform-origin: 0 100%;
pointer-events: none;
}
四边边框用 scale(0.5) 时最容易踩的盒模型坑
想给整个容器加四边 1px 边框？别直接对元素本身操作，也别用 border: 2px 再缩放——那样会让 border 计入宽高，挤窄内容区。
- 伪元素要设
top: 0; left: 0; right: 0; bottom: 0;，再配合width: 200%; height: 200%和transform: scale(0.5)，才能铺满且不溢出 - 必须加
box-sizing: border-box，否则默认content-box下，border: 1px会让伪元素实际尺寸多出 2px，缩放后四角错位、边缘露白 -
transform-origin改为0 0（左上角），避免因内容变化导致锚点漂移 - 若父容器有
overflow: hidden，缩放后的伪元素可能被裁掉——因为缩放基于原始 200% 尺寸计算，坐标系未同步收缩
真正难的不是写出那几行 CSS，而是理解缩放锚点、盒模型和设备像素比三者怎么咬合。iOS 上 transform-origin 不加前缀在部分版本（如 iOS 14.5）里会失效，所以 -webkit-transform-origin: left bottom 依然建议保留。另外，圆角边框用这个方案会失真，此时该换 box-shadow 或 linear-gradient 模拟。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
