CSS 0.5px 細線邊框的原理和實現方式

Cympros 發布于2019-04-23 13:33 / 1752人閱讀

摘要：細線邊框的具體實現方法有偽元素縮放或漸變，模擬，畫線，裁剪等。對于普通電腦，屏幕物理像素和像素一一對應，顯示的最小單位就是。而現在的手機，屏幕物理寬度一般都大于頁面顯示寬度。

　　細線邊框的具體實現方法有：偽元素縮放或漸變，box-shadow模擬，svg畫線，border-image裁剪等。要實現小于1px的線條，有個先決條件：屏幕的分辨率要足夠高，設備像素比要大于1，即css中的1個像素對應物理屏幕中1個以上的像素點。

　　對于普通電腦，屏幕物理像素和css像素一一對應，顯示的最小單位就是1px。而現在的手機，屏幕物理寬度一般都大于頁面顯示寬度。例如蘋果6s的屏幕分辨率為1334x750像素，但是以375px的寬度顯示頁面，設備像素比就是750/375=2；此時在css中定義0.5px的寬度，實際上對應物理屏幕的1個像素點，這就是border小于1px的的實現基礎。

 1 
 2 <style>
 3 @media only screen and (-webkit-min-device-pixel-ratio: 2){
 4   .fineLine{
 5     -webkit-transform: scaleY(.5);
 6   }
 7 }
 8 style>
 9  
10 
11 <script type="text/javascript">
12   var dpr = window.devicePixelRatio;
13   // 如下方法精確計算出了物理設備與css的像素比dppx。但實際使用中dpr更廣泛，也足以滿足一般需求
14   var dppx = window.screen.width/(window.innerWidth || document.documentElement.clientWidth);
15 script>

一、縮放biefore/after偽元素

　　偽元素進行絕對定位，background著色要優于border著色，適合畫單線條：

 1 <div class="fineLine">div>
 2 
 3 <style type="text/css">
 4 .fineLine {
 5     position: relative;
 6 }
 7 .fineLine:before,.fineLine:after{
 8   position: absolute;
 9   content: " ";
10   height: 1px;
11   width: 100%;
12   left: 0;
13   transform-origin: 0 0;
14   -webkit-transform-origin: 0 0;
15 }
16 .fineLine:before {
17     top: 0;
18     background: #000;
19 }
20 .fineLine:after {
21     bottom: 0;
22     border-bottom: 1px solid #000;
23 }
24 @media only screen and (-webkit-min-device-pixel-ratio: 1.5) {
25     .fineLine:after,.fineLine:before {
26         -webkit-transform: scaleY(.667);
27     }
28 }
29 @media only screen and (-webkit-min-device-pixel-ratio: 2) {
30     .fineLine:after,.fineLine:before {
31         -webkit-transform: scaleY(.5);
32     }
33 }
34 style>

二、box-shadow模擬

　　box-shaodw適合模擬box四周都需要細線border的情況，而且支持border-radius。此例中演示的是dppx鑒別：

 1 <div class="fineLine">div>
 2  
 3 <style type="text/css">
 4 .fineLine {
 5     box-shadow: 0 0 0 1px;
 6 }
 7 @media (min-resolution: 2dppx) {
 8     .fineLine {
 9         box-shadow: 0 0 0 0.5px;
10     }
11 }
12 @media (min-resolution: 3dppx) {
13     .fineLine {
14         box-shadow: 0 0 0 0.33333333px;
15     }
16 }
17 style>

云服務器 GPU云服務器邊框細線 volatile的實現原理回調的原理、實現與應用互聯網專線的接入實現方式

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/2037.html

CSS3如何實現0.5邊框

摘要：在移動端有時的邊框會顯得很粗不美觀，淘寶京東的觸屏均是采用淺細的線條來顯示在移動設備上。在移動端有時1px的邊框會顯得很粗不美觀，淘寶、京東的觸屏均是采用淺細的線條來顯示在移動設備上。具體實現方法如下：普通的1px黑色實線邊框： border: 1px solid #000; 半像素邊框當然不是簡單地把1px改為0.5px（會被解析成1px），border-width的值只能是自...

fobnn 2019-08-29 12:42 評論0 收藏0
CSS3如何實現0.5邊框

摘要：在移動端有時的邊框會顯得很粗不美觀，淘寶京東的觸屏均是采用淺細的線條來顯示在移動設備上。在移動端有時1px的邊框會顯得很粗不美觀，淘寶、京東的觸屏均是采用淺細的線條來顯示在移動設備上。具體實現方法如下：普通的1px黑色實線邊框： border: 1px solid #000; 半像素邊框當然不是簡單地把1px改為0.5px（會被解析成1px），border-width的值只能是自...

Jason 2019-08-01 16:55 評論0 收藏0
移動端H5頁面中1px邊框的幾種解決方法

問題提出這是一個比較老的問題了，我第一次注意到的時候，是UI設計師來找我麻煩，emmm那時候我才初入前端職場，啥也不懂啊啊啊啊啊，情形是這樣的：設計師拿著手機過來：這些邊框都粗了啊，我的設計稿上是1px的我：？？？？我寫的是1px呀，不信你看。（說著拿出了css代碼設計師：不對啊我眼睛看來這個邊框比我設計稿上粗很多，看起來好奇怪（emmm果然像素眼我：那我把它改成0.5px你看看（邊說邊改了代碼...

enda 2019-08-29 16:07 評論0 收藏0