**
IOS モバイル互換性の問題を解決するために 0.5 ピクセルの線を CSS で描画する方法##
**
デザイナーがデザイン画を作成する場合、ベンチマークとして iPhone6 (物理幅 750 ピクセル) に基づいています。iPhone6のデバイスピクセル比(つまり、物理ピクセルに対するCSSピクセルの比率)は2であるため、デザイナーが境界線1pxのボックスをデザインした場合、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>