**
How to CSS-draw a 0.5px line to solve IOS mobile compatibility issues##
**
When the designers are making design drawings, they are based on the iphone6 (750 physical pixels in width) as the benchmark. The device pixel ratio of iphone6 (that is, the ratio of css pixels to physical pixels) is 2, so when the designer designs a box with a border of 1px, it is 0.5 pixels compared to the css code. If you use css to directly set the border to 0.5px, in this case the iPhone can display normally, but almost all browsers under android will recognize 0.5 as 0, that is, no border state, so this method will not work.
在这里插入代码片<!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>