在css3中处理retina屏下1px边框模糊，核心方案是使用`transform: scale()`进行缩放，或者使用`box-shadow`模拟边框。推荐使用`transform`方案，因为它能精确控制线条粗细且兼容性好；若需兼容极老浏览器或追求极致性能，可使用`box-shadow`方案。具体做法是创建一个伪元素，将其宽度设为200%（即2倍），然后通过`scaley(0.5)`将其压缩回视觉上的1px，从而利用高清屏的物理像素优势消除锯齿。
transform缩放方案的实现细节
该方案通过伪元素和变换矩阵解决模糊问题。首先设置容器为相对定位，伪元素绝对定位到底部，宽度设为200%，高度为1px，背景色为边框颜色。关键步骤是应用`transform-origin: bottom`和`transform: scaleY(0.5)`。这样，物理上2px高的元素在视觉上被压缩为1px，但在Retina屏幕上它依然由两个物理像素组成，从而避免了单像素渲染时的亚像素模糊。此方法适用于大多数现代浏览器。
.border-bottom-1px {
position: relative;
}
.border-bottom-1px::after {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 1px;
background-color: #ccc;
transform-origin: bottom;
transform: scaleY(0.5);
}
运行上述代码后，预期结果是在Retina屏幕上显示清晰锐利的1px灰色底边，而在非Retina屏幕上可能显示为0.5px（视觉上极细）或1px（取决于浏览器对半像素的处理，通常表现为轻微变淡但无模糊）。对于需要严格1px的场景，可结合媒体查询针对非Retina屏调整`scaleY`值。
box-shadow模拟方案的替代实践
当无法使用伪元素或需要更复杂的边框效果时，`box-shadow`是另一种有效手段。通过设置`box-shadow: inset 0 -1px 1px -1px #ccc`，可以在元素内部底部绘制一条阴影线。这里的技巧在于使用负值的blur-radius和spread-radius，使得阴影紧贴边缘且不产生扩散模糊。这种方法不需要额外的DOM结构，直接作用于目标元素本身，适合用于卡片、输入框等组件的边框处理。
.card {
box-shadow: inset 0 -1px 1px -1px #ccc;
/* 其他样式 */
}
执行该样式后，预期结果是卡片底部出现一条清晰的1px内边框。由于`box-shadow`是硬件加速属性，在某些移动设备上性能优于伪元素方案。需要注意的是，如果元素本身有圆角，`box-shadow`会跟随圆角形状，而`transform`伪元素方案则需要额外处理圆角兼容性。
基于transform-origin属性的边界条件验证
在使用`transform: scaleY(0.5)`方案时，`transform-origin`的设置至关重要。如果未显式指定`transform-origin: bottom`，默认值为`center`，这会导致伪元素向上偏移，造成边框位置错误。此外，当父容器存在`overflow: hidden`时，伪元素可能被裁剪，导致边框不可见。因此，必须确保父容器允许子元素溢出，或通过调整`bottom`值来修正位置。在实际项目中，建议统一封装一个Mixin或类，固定这些参数以避免遗漏。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
