移动端css优化1px边框的核心思路是利用伪元素结合transform缩放来“欺骗”视觉，解决高清屏下边框变粗的问题。1. 使用伪元素:before或:after创建边框，通过transform:scaley(0.5)在2倍屏上将1px高度缩小至视觉上的1px；2. 设置transform-origin:0 0确保缩放原点正确，避免位置偏移；3. 添加pointer-events:none防止伪元素遮挡交互；4. 针对不同dpr屏幕，可通过javascript获取devicepixelratio并动态设置css变量--scale实现适配；5. 边框颜色通过background-color或background渐变设置；6. 相比box-shadow，伪元素方案不改变盒模型，更利于布局；7. 实现四周边框可用单个伪元素配合width/height放大和transform:scale(0.5)整体缩放；8. 为避免覆盖内容，可设置伪元素z-index低于内容或保持pointer-events:none确保事件穿透。该方案兼容性好且视觉效果精准，完整解决了多dpr设备下的1px边框显示问题。
移动端 CSS 优化 1px 边框，核心思路就是“骗”眼睛。用伪元素缩放来实现，既能保证视觉上的 1px，又能解决高清屏下的像素显示问题。
解决方案
用伪元素
:before或
:after，然后
transform: scale()缩小。举个例子：
立即学习“前端免费学习笔记（深入）”；
.border-1px {
position: relative; /* 关键，让伪元素相对于它定位 */
}
.border-1px:after {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 1px; /* 或者根据需求调整 */
background-color: #ccc; /* 边框颜色 */
transform-origin: 0 0; /* 缩放原点 */
transform: scaleY(0.5); /* Y轴缩放0.5倍，模拟1px */
pointer-events: none; /* 防止伪元素遮挡点击事件 */
}
@media (-webkit-min-device-pixel-ratio: 3) {
.border-1px:after {
transform: scaleY(0.333); /* 3倍屏缩放0.333倍 */
}
}这段代码的核心在于：先用
height: 1px定义一个物理上的 1px 高度，然后用
transform: scaleY(0.5)将它在垂直方向上缩小到 0.5 倍。 这样，在 2 倍屏上看起来就是 1px，解决了高清屏下的边框变粗问题。
transform-origin: 0 0确保缩放以左上角为原点，避免位置偏移。
为什么不用 border
直接设置 0.5px？
因为很多浏览器不支持小于 1px 的
border。
移动端适配：不同屏幕像素密度下的 1px 方案？
屏幕像素密度（DPR）不同，缩放比例也要跟着调整。上面的例子里，用了
@media查询来针对 3 倍屏进行特殊处理。 但更通用的做法是，用 JavaScript 获取 DPR，然后动态设置 CSS 变量，再在 CSS 中使用这些变量。
const dpr = window.devicePixelRatio || 1;
document.documentElement.style.setProperty('--scale', 1 / dpr);.border-1px:after {
transform: scaleY(var(--scale));
}这种方式更灵活，能适应各种 DPR 的设备。
边框颜色如何保持一致？
直接在伪元素里设置
background-color就行。如果需要更复杂的边框样式，比如渐变色，也可以用
background相关属性来实现。
伪元素边框与 box-shadow 边框的优劣？
box-shadow也能模拟边框，但它会影响元素的盒模型，可能导致布局问题。伪元素边框更干净，不会影响盒模型，但需要注意
position: relative的设置，以及
pointer-events: none避免遮挡点击。
如何实现四周边框？
可以同时使用
:before和
:after，分别模拟上下和左右边框。 或者，用一个伪元素，然后用
transform: scale()同时缩放 X 轴和 Y 轴。
.border-1px {
position: relative;
}
.border-1px:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 200%; /* 放大两倍 */
height: 200%;
border: 1px solid #ccc;
transform-origin: 0 0;
transform: scale(0.5); /* 整体缩小 */
pointer-events: none;
}如何避免伪元素边框覆盖内容？
确保伪元素的
z-index低于内容。默认情况下，伪元素的
z-index是
auto，相当于 0。 如果内容有明确的
z-index，伪元素也需要设置一个更低的
z-index。 或者，直接用
pointer-events: none阻止伪元素响应鼠标事件，这样就不会遮挡点击了。
