查看京东的移动端1px实现原理,用的是:after和css3的scale(0.5)缩放。
border-right
fr:after{
height:100%;
content:' ';
width:1px;
border-right:1px solid #f0f0f0;
position:absolute;
top:0;
right:-1px;
transform:scaleX(0.5);
-webkit-transform:scaleX(0.5);
z-index:10;
}
border-bottom
.bottom:after { height: 1px; content: ''; width: 100%; border-top: 1px solid #f0f0f0; position: absolute; bottom: -1px; right: 0; transform: scaleY(0.5); -webkit-transform: scaleY(0.5); z-index: 10; }
文字两侧加横线
.gray-text:after { content: ""; height: 1px; width: 100%; position: absolute; top: 50%; left: 0; background-color: #cbcbcb; -webkit-transform: scaleY(.5); } .gray-text:after { margin-top: -0.5px; }