CSS怎样解决移动端1px边框问题_使用transform缩放实现精细显示-css教程-PHP中文网

手机上border: 1px看起来粗且糊，是因为高倍屏下CSS像素与物理像素未对齐；可靠方案是用transform: scaleY(0.5)缩放2px伪边框实现视觉1px。

css怎样解决移动端1px边框问题_使用transform缩放实现精细显示

为什么 `border: 1px` 在手机上看起来又粗又糊

因为高倍屏（如 iPhone 的 @2x/@3x）里，CSS 的 1px 实际对应多个物理像素，但浏览器默认把 1px 当作“设备独立像素”渲染，结果就是边框被强制拉伸、发虚。不是你写错了，是 CSS 像素和设备像素没对齐。

常见错误现象：border: 1px solid #ccc 在 iPhone 上看着像 2px 那么粗，边缘毛糙；用 border-width: 0.5px？大部分安卓机直接当 0 处理，边框消失。

只靠 border-width 调整基本不可靠，兼容性差
viewport 缩放（initial-scale）会影响实际渲染，但不能乱调，否则影响整个页面缩放体验
真正靠谱的路子是：用 transform: scale() 把一个 2px 的边框“压”回视觉 1px

用 `transform: scaleY(0.5)` 画一条真正的 1px 底边

核心思路：画一条 2px 的伪边框（比如用 ::after），再用 transform 在 Y 方向压缩一半——它在高倍屏上就精准落在 1 个物理像素上了。

使用场景：列表项下划线、卡片底部分割线、输入框下边框等单边需求。

div.line-bottom {
  position: relative;
}
div.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;
}

transform-origin: 0 0 很关键，否则缩放会偏移位置
必须设 position: relative 在父元素上，否则 ::after 定位失效
安卓部分低版本 WebView 对 scaleY(0.5) 支持不稳定，可 fallback 到 scale(0.5)（同时缩 X/Y）

左右/四边都想要 1px？改用 `transform: scale(0.5)` + `box-sizing: border-box`

单边好办，四边一起上就得小心盒模型打架。直接给元素加 border: 2px 再缩放，会导致内容区域被挤窄——因为 border 算进宽高了。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

正确做法：用伪元素撑出 2px 边框区域，再整体缩放，内容区完全不受影响。

.border-1px {
  position: relative;
}
.border-1px::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 200%;
  height: 200%;
  border: 2px solid #e5e5e5;
  transform: scale(0.5);
  transform-origin: 0 0;
  pointer-events: none;
}