對(duì)于移動(dòng)端總有要一像素邊框的需求臼疫,我嘗試過(guò)以下方法:
1择份、直接用1px,在移動(dòng)端顯示會(huì)比原型粗烫堤,不符合要求荣赶;
2、直接用0.5px鸽斟,不支持小于1px的寫(xiě)法拔创,不符合要求;
3富蓄、用rem當(dāng)單位剩燥,我使用0.05rem作為1px的邊,但是在部分機(jī)型適配上不完美立倍,會(huì)顯示不完整灭红;
4、使用偽類(lèi)口注,目前為止变擒,比較實(shí)用的方法,如下
對(duì)于單側(cè)邊寝志,如下邊線(xiàn):
.border-bottom{
position:relative;
}
.border-bottom:after{
content:"";position:absolute;
bottom:0;
left:0;
right:0;
border-top:1px solid #000;
-webkit-transform:scaleY(.5);
-webkit-transform-origin:0 0;
}
對(duì)于按鈕或其他類(lèi)似的四邊框:
.border{
position:relative;
border:0;
}
.border:after{content:'';
position:absolute;
left:0;
top:0;
border:1px solid #000;
width:200%;
height:200%;
-webkit-transform:scale(0.5);
transform:scale(0.5);
-webkit-transform-origin:left top;
transform-origin:left top;
}