**
如何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;
}
</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>
</body>
</html>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/226239.html
標籤：其他
上一篇：js異步介面并發數量控制
下一篇：手撕前端面試代碼題