如何在移动端使用CSS3实现精准的1px边框？-css教程-PHP中文网

iPhone上border:1px显示为2px是因DPR=2导致1逻辑像素映射为2物理像素并插值渲染；0.5px无效因浏览器不支持或四舍五入；伪元素方案需同时满足position:relative、transform-origin:0 100%、pointer-events:none才可靠。

如何在移动端使用css3实现精准的1px边框？

为什么直接写 `border: 1px` 在 iPhone 上看起来像 2px？

这不是写错了，是设备像素比（dpr）导致的必然结果。iPhone 8 及之后多数机型 dpr = 2，dpr = 3 的机型（如 iPhone 13 Pro）更常见。浏览器把 1 CSS 像素边框渲染成 2 或 3 个物理像素宽，再叠加抗锯齿，视觉上就发虚、偏粗。硬写 border-width: 0.5px 在多数安卓 WebView 和 Safari 旧版本中会被忽略或向上取整为 1px，实测 getComputedStyle(el).borderWidth 仍返回 "1px"。

`::after` + `transform: scaleY(0.5)` 怎么写才不偏位？

缩放值只是表象，错位才是真坑。关键在三点定位约束：

父元素必须设 position: relative，否则 ::after 会脱离上下文定位到 body
transform-origin 必须显式写成 0 100%（左下角），才能让 scaleY(0.5) 从底部向上压缩；写成 bottom 或 left bottom 在部分 Safari 版本里会失效
伪元素推荐用 height: 1px + background-color，别用 border-bottom: 1px——后者缩放后边缘易发虚，且可能挤占内容区
务必加 pointer-events: none，防止伪元素遮挡点击区域
加 -webkit-transform 和 -webkit-transform-origin 前缀，iOS 12–15 对无前缀支持不稳定

适配不同 `dpr` 设备的缩放比例怎么选？

不能只靠媒体查询硬编码，得看实际场景：

CSS工具箱(专业版)

全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

下载

对 dpr = 2 设备（绝大多数 iPhone、部分安卓），scaleY(0.5) 是最稳选择
对 dpr = 3 设备（如华为 Mate 系列、三星 S22），用 scaleY(0.33) 比 0.333 更可靠——CSS 不支持无限精度小数，0.333 在某些 Android WebView 中会四舍五入成 0.33 或 0.34
不要试图用 JS 动态注入 --scale 变量再配合 calc()，因为 transform 不支持 calc() 里的 CSS 变量（Chrome 122+ 才开始有限支持，iOS Safari 仍不支持）
更现实的做法：用媒体查询分两档，@media (-webkit-min-device-pixel-ratio: 3) 单独覆盖 scaleY(0.33)，其余走 0.5

四边都加 1px 边框时，`box-sizing` 为什么不能省？

单边用 scaleY 或 scaleX 没问题，但四边一起缩放必须整体处理：

伪元素设 top: 0; left: 0; right: 0; bottom: 0;，再用 transform: scale(0.5) 整体缩放
必须紧跟 box-sizing: border-box，否则默认 box-sizing: content-box 会让边框外扩 1px，缩放后四角错位、右侧/底部溢出，甚至出现半像素黑线
transform-origin 改为 0 0（左上角），确保缩放锚点稳定，不因内容变化偏移
父容器若有 overflow: hidden，缩放后伪元素可能被裁——因为缩放基于原始尺寸计算，坐标系未同步收缩