CSS中如何实现移动端1px像素边框的超薄视觉效果？-css教程-PHP中文网

用伪元素+transform: scaley(0.5)是解决高dpr屏1px边框变粗的最优方案，需设transform-origin: bottom、position: relative及pointer-events: none，dpr=3时应改用scaley(0.33)。

css中如何实现移动端1px像素边框的超薄视觉效果？

直接写 border: 1px solid #000 在 iPhone 或高 DPR 安卓机上必然变粗发虚，这不是你 CSS 写错了，而是设备像素比（DPR）让 1 CSS 像素映射到 2 或 3 个物理像素——浏览器插值渲染后自然糊、显粗。真·1 物理像素边框必须绕过这个映射，靠缩放伪元素实现。

为什么 transform: scaleY(0.5) 能压出 1 物理像素

核心不是“把 1px 缩小”，而是先用伪元素画一条 2px 高的线（比如 height: 2px），再用 transform: scaleY(0.5) 把它等比压缩——在 DPR=2 的设备上，2 物理像素 × 0.5 = 正好 1 物理像素，精准落点，不插值、不模糊。

transform-origin 必须设为 bottom（下边框）或 top（上边框），否则缩放后位置偏移
父元素必须有 position: relative，否则 ::after 的 absolute 定位失效
缩放的是伪元素本身，不影响文字、内边距、子元素尺寸
DPR=3 时得用 scaleY(0.33)，硬写死 0.5 在华为 Mate 系列上会细得看不见

单边边框（如底部线）怎么写才不翻车

底部边框最常用，但最容易漏掉两个关键点：缩放基点没对齐、伪元素被内容遮挡。

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

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

下载

用 bottom: 0 + transform-origin: bottom 组合，确保缩放后线仍贴底
加 pointer-events: none，否则伪元素会拦截点击事件
避免用 border-bottom: 1px 直接缩放整个元素——字体和 padding 全跟着变小

示例：

.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: bottom;
  pointer-events: none;
}

四边 1px 边框如何避免盒模型错乱

直接给元素加 border: 2px 再缩放，会导致 box-sizing 计算错误、内容区被挤窄。正确做法是让伪元素撑出边框区域，再整体缩放。

伪元素设 top: 0; right: 0; bottom: 0; left: 0;，再用 border: 1px 或 background 构建四边
缩放用 transform: scale(0.5)（非 scaleY），并设 transform-origin: 0 0
必须加 box-sizing: border-box 到伪元素，否则边框宽度不参与缩放计算
圆角要加在父元素上，配合 overflow: hidden 裁剪伪元素，别在伪元素上直接设 border-radius（会变形）