如何實現.5px的線條和.5px的圓角邊框

時間 2021-08-15

實現.5px的線條

網絡上有很多方法，如設置viewport，box-shawdow，border-image，background-image，transform:scale等，這裏不做介紹(百度或者谷歌「retina 1px 邊框」有答案)，本文只介紹一種覺得比較好用的方法，一來兼容性好，二來不依賴圖片。

transform:scale(x,y)

通過css支持定義border或者height爲.5px大的線條，在android設備中的無法顯示出來，這裏有個小技巧，果設置線條爲1px，然後通過transform:scale(x,y)來縮放線條爲原來的一半，可顯示0.5px的線條。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="width=device-width,initial-scale=1,maximum-scale=1.0,user-scalable=no" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
<meta content="email=no" name="format-detection">
<title>點5測試 - scale</title>
<style type="text/css">
.line {
    height: 50px;
    line-height: 50px;
    background-color: #CCC;
    border-bottom:1px solid red
} 
    
.scale {
    position: relative;
    height: 50px;
    line-height: 50px;
    background-color: #CCC
}
.scale:after {
    position: absolute;
    content: '';
    width: 100%;
    left: 0;
    bottom: 0;
    height: 1px;
    background-color: red;
    -webkit-transform: scale(1,.5);
    transform: scale(1,.5);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom
}
</style>
</head>

<body>
<div class="line">1px</div>
<br/><br/>    
<div class="scale">0.5px</div>
</body>

</html>

http://peunzhang.github.io/demo/d5px/height-scale.html

實現.5px的圓角邊框

.5px的邊框，看起來看神奇，這裏感謝藍叔提供的方法。

原理：先定義1px的圓角邊框，然後拉伸內容的寬度和高度爲父級的2倍(邊框厚度不變)，然後再使用transform:scale(0.5)縮放爲原來的0.5倍

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="width=device-width,initial-scale=1,maximum-scale=1.0,user-scalable=no" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
<meta content="email=no" name="format-detection">
<title>點5測試 - border-radius</title>
<style type="text/css">
body{padding: 50px;-webkit-touch-callout:none;}
[class*="btn"]{margin: 0 auto;}
.btn-1 {
    width: 200px;
    height: 42px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    text-align: center;
    line-height: 42px;
    background-color: #EDEDED;
    border: 1px solid red;
}
.btn {
    position: relative;
    width: 200px;
    height: 42px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    text-align: center;
    line-height: 42px;
    background-color: #EDEDED;
}
.btn:before {
    content: '';
    position: absolute;
    top: -50%;
    bottom: -50%;
    left: -50%;
    right: -50%;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    border-style: solid;
    border-width: 1px;
    border-color: red;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}
</style>
</script>
</head>

<body>

<div class="btn-1">1px border</div>
<br/><br/>
<div class="btn">.5px border</div>

</body>

</html>

http://1.peunzhang.sinaapp.com/demo/d5px/border-radius.html

如果你在chrome打開，會發現縮放線條會導致邊框顏色變淺，但大家可以放心使用，因爲在大部分移動設備(相對高端)的顏色還是正常的。