使用CSS 绘制出 1px 的边框，在移动端上渲染的效果会出现不同，部分手机发现1px 线条变胖了，这篇文章整理2种方式实现1px 像素线条。1、利用box-shadow + transform；2、利用border + 伪元素 + transform
1、利用box-shadow + transform
<style>
span.onepixel{
width: 300px;position: relative;top:50px;
}
span.onepixel::after {
content: '';
width: 300px;
position: absolute;
bottom: 0;
left: 0;
box-shadow: 0 0 0 1px #666;
transform-origin: 0 bottom;
transform: scaleY(.5) translateZ(0);
}
@media (min-resolution: 2dppx) {
span.onepixel.shadow::after {
box-shadow: 0 0 0 .5px #666;
}
}
@media (min-resolution: 3dppx) {
span.onepixel.shadow::after {
box-shadow: 0 0 0 .333333px #666;
}
}
</style>
<span class="onepixel shadow"></span>
2、利用border + 伪元素 + transform
<style>
span.onepixel {
display: block;
width: 300px;
position: relative;
}
span.onepixel::before, span.onepixel::after {
content: "";
display: block;
position: absolute;
transform-origin: 0 0;
}
span.onepixel.top::before {
width: 100%;
top: 0; left: 0;
border-top: 1px solid #666;
transform-origin: 0 top;
}
@media (min-resolution: 2dppx) {
span.onepixel.top::before {
width: 200%;
transform: scale(.5) translateZ(0);
}
}
@media (min-resolution: 3dppx) {
span.onepixel.top::before {
width: 300%;
transform: scale(.333333) translateZ(0);
}
}
</style>
<span class="onepixel top"></span>
服务热线 19970861797
