ios 0.5px线可直接画,但是安卓不行,用border:0.5px solid red;显示出来的直接是1px。所以用伪类after(before)和transform属性实现。
1、最初实现0.5px的bottom
<div class="bottom-line"> 画0.5px的线 </div> .bottom-line{ position:relative; font-size: 20px; 200px; } .bottom-line::after{ position:absolute; content:""; bottom:0; left:0; border-bottom:1px solid red; 200px; height:1px; transform:scaleY(0.5); }
但是这样在部分安卓手机上,部分地方会消失不见,不显示。
2.进一步优化实现 0.5px bottom
.bottom-line::after{
position:absolute;
content:"";
bottom:0;
left:0;
background:red;
200px;
height:1px;
transform:scaleY(0.5);
}
3.这对于大多数元素已经完美解决了,但是input框不支持伪类。所以为了实现input的0.5px border,将boder加在其父元素上
.serach-top form {
position: relative;
}
.serach-top form::before {
top: -1px;
left:-1px;
position: absolute;
content: '';
790px;
/* width height比input框的2倍多两个像素 */
height: 78px;
border: 1px solid red;
border-radius: 12px;
transform-origin: 0 0;
transform: scale(0.5);
box-sizing: content-box;
}