1px直线与1px四边边框的写法

1、单条 border

.hairlines li{

position: relative;border:none;

}

.hairlines li:after{

content:'';

position:absolute;

left:0;

background:#000;

width:100%;

height:1px;

-webkit-transform:scaleY(0.5);

transform:scaleY(0.5);

-webkit-transform-origin: 0 0;

transform-origin: 0 0;

}

2、四条 border（边框）

.hairlines li{

position:relative;

margin-bottom: 20px;

border:none;

}

.hairlines li:after{

content: '';

position: absolute;

top:0;

left:0;

border: 1px solid #000;

-webkit-box-sizing: border-box;

box-sizing: border-box;

width: 200%;

height: 200%;

-webkit-transform: scale(0.5);

transform: scale(0.5);

-webkit-transform-origin: left top;

transform-origin: left top;

 }

 

转载于:https://www.cnblogs.com/hehuiself/p/7099833.html