**
如何CSS-画0.5px的线，解决IOS移动端兼容性问题##
**
设计师在做设计图的时候都是以iphone6（宽为750物理像素）为基准进行设计的。iphone6的设备像素比（即css像素与物理像素的比例）是2，所以设计师在设计图画了边框为1px的box的时候，相对于css代码来说就是0.5像素。如果用css直接设置边框为0.5px，这种情况下iPhone可以正常显示，但是android下几乎所有的浏览器都会把0.5识别为0，即无边框状态，所以这种方式行不通的。
在这里插入代码片<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>0.5px线实现方法</title>
<style type="text/css">
/*标准1px边框*/
.b1{
height: 40px;
border: 1px solid #ff0000;
}
/*1.可以利用利用渐变样式=>实现.5px*/
.a1{
height: 1px;
margin-top: 20px;
background-image: linear-gradient(0deg, #f00 50%, transparent 50%);
}
/*2.可以利用缩放-发虚=>实现.5px*/
.a2{
height: 1px;
margin-top: 20px;
background-color: #f00;
-webkit-transform: scaleY(.5);
transform:scaleY(.5);
}
/*3.四条边框都需要的样式*/
.scale-half {
margin-top: 20px;
height: 100px;
border:1px solid #f00;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: scale(.5, .5);
transform: scale(.5, .5);
}
/*4.给伪元素添加设置边框*/
.border3{
position: relative;
}
.border3:before{
content: '';
position: absolute;
width: 200%;
height: 200%;
border: 1px solid blue;
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
-ms-transform-origin: 0 0;
-o-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: scale(.5, .5);
-ms-transform: scale(.5, .5);
-o-transform: scale(.5, .5);
transform: scale(.5, .5);
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/*5.竖着的线*/
.line-1px {
position: relative;
width: 1px;
height: 40px;
background: #FF6A00;
margin: 2px 4px 0;
}
.line-1px::after {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
border-right: 1px solid #eee;
content: '';
}
</style>
</head>
<body>
<div class="b1">正常1px边框</div>
<div class="a1"></div>
<div class="a2"></div>
<div class="scale-half"></div>
<div class="border3">
<div class="content">伪类设置的边框</div>
</div>
竖着的线<div class="line-1px"></div>
</body>
</html>