css实现1px 像素线条_解决移动端1px线条的显示方式
使用CSS 绘制出 1px 的边框，在移动端上渲染的效果会出现不同，部分手机发现1px 线条变胖了，这篇文章整理2种方式实现1px 像素线条。
1、利用box-shadow + transform
1 <style> 2 span.onepixel{ 3 width: 300px;position: relative;top:50px; 4 } 5 span.onepixel::after { 6 content: ''; 7 width: 300px; 8 position: absolute; 9 bottom: 0; 10 left: 0; 11 box-shadow: 0 0 0 1px #666; 12 transform-origin: 0 bottom; 13 transform: scaleY(.5) translateZ(0); 14 } 15 @media (min-resolution: 2dppx) { 16 span.onepixel.shadow::after { 17 box-shadow: 0 0 0 .5px #666; 18 } 19 } 20 @media (min-resolution: 3dppx) { 21 span.onepixel.shadow::after { 22 box-shadow: 0 0 0 .333333px #666; 23 } 24 } 25 </style> 26 <span class="onepixel shadow"></span>
办公资源网址导航 https://www.wode007.com
2、利用border + 伪元素 + transform
1 <style> 2 span.onepixel { 3 display: block; 4 width: 300px; 5 position: relative; 6 } 7 span.onepixel::before, span.onepixel::after { 8 content: ""; 9 display: block; 10 position: absolute; 11 transform-origin: 0 0; 12 } 13 span.onepixel.top::before { 14 width: 100%; 15 top: 0; left: 0; 16 border-top: 1px solid #666; 17 transform-origin: 0 top; 18 } 19 @media (min-resolution: 2dppx) { 20 span.onepixel.top::before { 21 width: 200%; 22 transform: scale(.5) translateZ(0); 23 } 24 } 25 @media (min-resolution: 3dppx) { 26 span.onepixel.top::before { 27 width: 300%; 28 transform: scale(.333333) translateZ(0); 29 } 30 } 31 </style> 32 33 <span class="onepixel top"></span>
