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