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

時間 2019-12-08

標籤如何實現 5px 線條圓角邊框欄目 CSS 简体版

原文原文鏈接

實現.5px的線條

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

transform:scale(x,y)html

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

<!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.htmlgit

實現.5px的圓角邊框

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

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

<!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.htmlchrome

若是你在chrome打開，會發現縮放線條會致使邊框顏色變淺，但你們能夠放心使用，由於在大部分移動設備(相對高端)的顏色仍是正常的。網絡