在移动端会出现线条太粗的现象,简单来说,是因为手机端的像素单位和ui的图比例是2:1,所以ui图的1px边框对我们来说就是0.5px,但是浏览器渲染的最小单位就是1px,下面给几种方法用css写出0.5px边框
1.
html部分
<div class="border">测试0.5px边框</div>
css部分
.border{
position:
color:
font-size:
line-height:
}
.border:after{
height:
content:
border-bottom:
position:
bottom:
right:
transform:
-webkit-transform:
z-index:
}
用添加伪元素的方法添加下边框,再利用transform在y轴缩小1倍
2.
.border{
200px;
color:
font-size:
line-height:
border-bottom: 1px solid transparent !important;
-webkit-border-image: url("../img/line-bottom.png") 2 0 stretch;
border-image: url("../img/line-bottom.png") 2 0 stretch;
-o-border-image: url("../img/line-bottom.png") 2 0 stretch;
-moz-border-image: url("../img/line-bottom.png") 2 0 stretch;
border- 0 0 1px;
}
line-bottom.png 是宽1px 高2px的小图片,1px透明,1px用border的颜色,这样也能写出1px边框,优点,如果用less或者sass,可以定义成公用的,引用方便,缺点:换颜色要换图片