前端頁(yè)面細節處理好了才會(huì )顯得精致。邊框在網(wǎng)頁(yè)中是常見(jiàn)的一種樣式了。雖然不把它處理為0.5px看上去沒(méi)毛病，但是想讓你做的東西征服更多的人，這些細節處理是必須的。
今天主要說(shuō)一下如何讓邊框顯示0.5px的方法：
方法一：利用漸變
關(guān)于漸變可以看下面兩篇文章做深入了解：
實(shí)現原理：
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>邊框0.5px實(shí)現方法</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>
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>邊框0.5px實(shí)現方法</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>
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>邊框0.5px實(shí)現方法</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的線(xiàn)條的話(huà)</h3> <div class="border-all"> 這是實(shí)現一個(gè)盒子四周0.5px的做法， 如果加入border-radius圓角效果，會(huì )發(fā)現，有些手機會(huì )有圓角發(fā)虛的情況，不過(guò)影響不是很大。如果有兩個(gè)盒子，上面一個(gè)盒子沒(méi)有邊框效果，下面盒子有邊框效果，兩個(gè)盒子一樣寬，上下在一起的布局方式，你會(huì )發(fā)現，在手機上有時(shí)候會(huì )對不齊… 錯開(kāi)了0.5px，原因已經(jīng)很明了了…還有那個(gè)z-index ，可以根據不同需求來(lái)調整使用，如果可以的話(huà)，不使用也是可以的。 </div> </div> </body></html>
其它文章推薦：
聯(lián)系客服
