高清屏上1px边框变粗是因dpr≥2时css像素映射多物理像素；用伪元素+transform scaley缩放（如0.5/0.33）并配合媒体查询可实现真正1物理像素边框，scss mixin可封装复用。
为什么直接写 border: 1px solid #ccc 在高清屏上会变粗
因为 Retina 屏（dpr ≥ 2）下，CSS 的 1px 实际对应多个物理像素，浏览器默认用多像素渲染，视觉上就“发虚”或“加粗”。这不是 bug，是设备像素比（dpr）和 CSS 像素映射的自然结果。关键不是“去掉边框”，而是让边框真正只占 1 物理像素。
用 transform: scaleY(0.5) 拉伸容器实现 1px 边框
这是最轻量、兼容性好（iOS 8+/Android 4.4+）、无需 JS 的方案，核心是把边框画在伪元素上，再缩放它。注意必须配合 transform-origin 控制缩放基点，否则位置偏移。
<pre class="brush:php;toolbar:false;">.border-1px {
position: relative;
}
.border-1px::after {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 1px;
background-color: #ccc;
transform: scaleY(0.5);
transform-origin: bottom;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
.border-1px::after {
transform: scaleY(0.5);
}
}
@media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 288dpi) {
.border-1px::after {
transform: scaleY(0.33);
}
}SCSS 封装成 mixin
避免重复写媒体查询手动写多档 dpr 查询太啰嗦，用 SCSS 可以抽象为可复用的 @mixin。注意：不能直接用 $dpr 变量参与媒体查询条件（Sass 不支持动态生成媒体查询），所以得用 @each 预定义好常见档位。
<pre class="brush:php;toolbar:false;">@mixin border-1px($color: #e5e5e5, $position: bottom) {
position: relative;
&::after {
content: '';
position: absolute;
left: 0;
#{$position}: 0;
width: 100%;
height: 1px;
background-color: $color;
transform-origin: $position;
}
@each $dpr, $scale in (2: 0.5, 3: 0.33) {
@media (-webkit-min-device-pixel-ratio: $dpr), (min-resolution: #{($dpr * 96)}dpi) {
&::after {
transform: scaleY($scale);
}
}
}
}
<p>// 使用
.cell {
@include border-1px(#ddd, bottom);
}</p>不用伪元素？border-image
方案的坑虽然 border-image 理论上能用 1px 图片拉伸，但实际中问题不少：iOS Safari 对 border-image-slice 解析不稳定；Android 低版本不支持 border-image 裁剪；且必须额外维护图片资源。除非项目已统一用 icon font 或雪碧图，否则不推荐。
- 必须设
border-width: 1px，否则border-image不生效 -
border-image-slice: 1是关键，但部分安卓 WebView 会忽略它 - 缩放时边缘可能模糊，因图片被双线性插值拉伸
真正省事又稳定的方式，还是伪元素 + 缩放 + SCSS mixin。别为了“不用伪元素”硬套 border-image，最后调试成本更高。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
