資訊專欄INFORMATION COLUMN
摘要：細(xì)線邊框的具體實(shí)現(xiàn)方法有偽元素縮放或漸變，模擬，畫線，裁剪等。對于普通電腦，屏幕物理像素和像素一一對應(yīng)，顯示的最小單位就是。而現(xiàn)在的手機(jī)，屏幕物理寬度一般都大于頁面顯示寬度。
細(xì)線邊框的具體實(shí)現(xiàn)方法有：偽元素縮放或漸變，box-shadow模擬，svg畫線，border-image裁剪等。要實(shí)現(xiàn)小于1px的線條，有個先決條件：屏幕的分辨率要足夠高，設(shè)備像素比要大于1，即css中的1個像素對應(yīng)物理屏幕中1個以上的像素點(diǎn)。
對于普通電腦，屏幕物理像素和css像素一一對應(yīng)，顯示的最小單位就是1px。而現(xiàn)在的手機(jī)，屏幕物理寬度一般都大于頁面顯示寬度。例如蘋果6s的屏幕分辨率為1334x750像素，但是以375px的寬度顯示頁面，設(shè)備像素比就是750/375=2；此時在css中定義0.5px的寬度，實(shí)際上對應(yīng)物理屏幕的1個像素點(diǎn)，這就是border小于1px的的實(shí)現(xiàn)基礎(chǔ)。
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 // 如下方法精確計(jì)算出了物理設(shè)備與css的像素比dppx。但實(shí)際使用中dpr更廣泛，也足以滿足一般需求 14 var dppx = window.screen.width/(window.innerWidth || document.documentElement.clientWidth); 15 script>
?
偽元素進(jìn)行絕對定位，background著色要優(yōu)于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-shaodw適合模擬box四周都需要細(xì)線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>
?
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/2037.html
摘要：在移動端有時的邊框會顯得很粗不美觀，淘寶京東的觸屏均是采用淺細(xì)的線條來顯示在移動設(shè)備上。 在移動端有時1px的邊框會顯得很粗不美觀，淘寶、京東的觸屏均是采用淺細(xì)的線條來顯示在移動設(shè)備上。具體實(shí)現(xiàn)方法如下： 普通的1px黑色實(shí)線邊框： border: 1px solid #000; 半像素邊框當(dāng)然不是簡單地把1px改為0.5px（會被解析成1px），border-width的值只能是自...
摘要：在移動端有時的邊框會顯得很粗不美觀，淘寶京東的觸屏均是采用淺細(xì)的線條來顯示在移動設(shè)備上。 在移動端有時1px的邊框會顯得很粗不美觀，淘寶、京東的觸屏均是采用淺細(xì)的線條來顯示在移動設(shè)備上。具體實(shí)現(xiàn)方法如下： 普通的1px黑色實(shí)線邊框： border: 1px solid #000; 半像素邊框當(dāng)然不是簡單地把1px改為0.5px（會被解析成1px），border-width的值只能是自...
問題提出 這是一個比較老的問題了，我第一次注意到的時候，是UI設(shè)計(jì)師來找我麻煩，emmm那時候我才初入前端職場，啥也不懂啊啊啊啊啊，情形是這樣的：設(shè)計(jì)師拿著手機(jī)過來：這些邊框都粗了啊，我的設(shè)計(jì)稿上是1px的我：？？？？我寫的是1px呀，不信你看。（說著拿出了css代碼設(shè)計(jì)師：不對啊我眼睛看來這個邊框比我設(shè)計(jì)稿上粗很多，看起來好奇怪（emmm果然像素眼我：那我把它改成0.5px你看看（邊說邊改了代碼...
閱讀 2509·2023-04-26 00:01
閱讀 867·2021-10-27 14:13
閱讀 1922·2021-09-02 15:11
閱讀 3461·2019-08-29 12:52
閱讀 595·2019-08-26 12:00
閱讀 2629·2019-08-26 10:57
閱讀 3471·2019-08-26 10:32
閱讀 2905·2019-08-23 18:29
