如何修复移动端1px边框看起来太粗的问题_利用CSS伪元素与transform: scale(0.5)缩放-css教程-PHP中文网

最稳妥方案是伪元素+transform: scaleY(0.5)，因高DPR屏幕将1px映射为多物理像素致边框发虚，而0.5px不被多数浏览器支持；须设position: relative、transform-origin: 0 0，并用height: 2px缩放还原视觉1px。

如何修复移动端1px边框看起来太粗的问题_利用css伪元素与transform: scale(0.5)缩放

直接用 transform: scaleY(0.5) 配合伪元素是最稳妥、兼容性最好、开发成本最低的方案，但必须控制好定位锚点、缩放目标和父容器约束，否则边框会偏移、被裁或在安卓低版本失效。

为什么 `border: 1px` 在手机上看起来像 2px？

因为高 DPR 屏幕（如 iPhone 的 dpr=2 或华为部分机型 dpr=3）会把 1 CSS 像素映射到多个物理像素，浏览器再插值渲染，导致边框发虚变粗；border: 0.5px 在多数安卓 WebView 和旧版 iOS 中根本不识别，写了也当没写。

真正起作用的是「先画 2px，再压回视觉 1px」——不是靠浏览器支持小数边框，而是靠缩放让 2px 边框精准落在 1 个物理像素上。

`::after` 伪元素 + `transform: scaleY(0.5)` 怎么写才不偏移？

关键不在缩放本身，而在缩放的原点和定位上下文：

父元素必须设 position: relative，否则 ::after 的 bottom: 0 会相对于 body 定位
transform-origin: 0 0 必须显式写，否则默认以中心为锚点，缩放后边框整体上浮或右移
height: 2px 是基准值，不是 1px；缩放的是这个 2px 元素，不是内容
安卓部分低版本（如 Android 4.4 WebView）对 scaleY 支持不稳定，可 fallback 为 transform: scale(0.5)（同时缩 X/Y）

示例（下边框）：

.line-bottom {
  position: relative;
}
.line-bottom::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background-color: #ddd;
  transform: scaleY(0.5);
  transform-origin: 0 0;
}

四边都加 1px 边框时，`scale(0.5)` 会把内容压扁吗？

不会压扁内容，但会干扰盒模型——如果直接给元素加 border: 2px 再缩放，border 仍计入宽高，内容区实际变窄。

CSS工具箱(专业版)

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

下载

正确做法是：只让伪元素承担边框职责，内容区域完全隔离：

用 ::before 画一个 200% × 200% 的伪元素，设 border: 1px
再用 transform: scale(0.5) 缩回原尺寸
必须加 box-sizing: border-box，否则缩放后边框位置飘移
transform-origin 改为 0 0，确保缩放锚点稳定在左上角

更稳妥的写法（四边）：

.border-1px {
  position: relative;
}
.border-1px::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 200%;
  height: 200%;
  border: 1px solid #ddd;
  transform: scale(0.5);
  transform-origin: 0 0;
  box-sizing: border-box;
}