移动端边框1px的实现

Posted 2020-07-31 一叶知秋 https://www.cssge.com

查看京东的移动端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;
}