**
Cómo dibujar con CSS una línea de 0.5px para resolver problemas de compatibilidad móvil con IOS##
**
Cuando los diseñadores están haciendo dibujos de diseño, se basan en el iphone6 (750 píxeles físicos de ancho) como punto de referencia. La proporción de píxeles del dispositivo de iphone6 (es decir, la proporción de píxeles css a píxeles físicos) es 2, por lo que cuando el diseñador diseña un cuadro con un borde de 1 px, son 0,5 píxeles en comparación con el código css. Si usa css para establecer directamente el borde en 0.5px, en este caso el iPhone puede mostrarse normalmente, pero casi todos los navegadores en Android reconocerán 0.5 como 0, es decir, sin estado de borde, por lo que este método no funcionará.
在这里插入代码片<!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>