CSS3實現0.5px的邊框
阿新 • • 發佈：2017-06-23
手機 沒有 posit border 深入 net itl res for
前端頁面細節處理好了才會顯得精致。邊框在網頁中是常見的一種樣式了。雖然不把它處理為0.5px看上去沒毛病，但是想讓你做的東西征服更多的人，這些細節處理是必須的。
今天主要說一下如何讓邊框顯示0.5px的方法：
方法一：利用漸變
關於漸變可以看下面兩篇文章做深入了解：
CSS3 漸變（Gradients）
深入理解CSS3 gradient斜向線性漸變
實現原理：
把元素的偽類高度設為1px,背景漸變，一半有顏色，一半透明。 線上案例：百度糯米（沒有改版的話） 代碼如下：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>邊框0.5px實現方法</title> <style type="text/css"> .container{ width: 500px; margin: 0px auto; } .border-gradient{ position:relative; padding: 10px; } .border-gradient:after { content:" "; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background-image: linear-gradient(0deg, #f00 50%, transparent 50%); } </style> </head> <body> <div class="container"> <h3>方案一：漸變</h3> <div class="border-gradient"> 原理：高度1px,背景漸變，一半有顏色，一半透明。 </div> </div> </body> </html>
方法二：利用縮放 原理：transform:scale()來達到壓縮一半的目的。 線上案例：京東 代碼如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>邊框0.5px實現方法</title> <style type="text/css"> .container{ width: 500px; margin: 0px auto; } .border-scale{ position:relative; padding: 10px; } .border-scale:after{ content: " "; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background-color: #f00; /* 如果不用 background-color, 使用 border-top:1px solid #f00; 效果是一樣的*/ -webkit-transform: scaleY(.5); transform:scaleY(.5); } </style> </head> <body> <div class="container"> <h3>方案二：使用縮放</h3> <div class="border-scale"> 原理： 在Y軸方向上，壓縮一半。 </div> </div> </body> </html>
拓展：4條邊框都需要 原理：也是利用transform:scale()，只不過這次縮放的是整個內容。 代碼如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>邊框0.5px實現方法</title> <style type="text/css"> .container{ width: 500px; margin: 0px auto; } .border-all{ position:relative; padding: 10px; } .border-all:after{ content: " "; position: absolute; left: 0; top: 0; z-index:-1; width: 200%; height:200%; border:1px solid #f00; -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: scale(.5, .5); transform: scale(.5, .5); border-radius: 10px; } </style> </head> <body> <div class="container"> <h3>拓展：四周全是0.5px的線條的話</h3> <div class="border-all"> 這是實現一個盒子四周0.5px的做法， 如果加入border-radius圓角效果，會發現，有些手機會有圓角發虛的情況，不過影響不是很大。如果有兩個盒子，上面一個盒子沒有邊框效果，下面盒子有邊框效果，兩個盒子一樣寬，上下在一起的布局方式，你會發現，在手機上有時候會對不齊… 錯開了0.5px，原因已經很明了了…還有那個z-index ，可以根據不同需求來調整使用，如果可以的話，不使用也是可以的。 </div> </div> </body> </html>
其它文章推薦：
移動端1px細線解決方案總結
webapp中的CSS3實現 0.5px的細線
CSS3實現0.5px的邊框