首頁  >  文章  >  web前端  >  css如何做出0.5像素的線條

css如何做出0.5像素的線條

php中世界最好的语言
php中世界最好的语言原創
2018-03-21 13:21:554159瀏覽

這次帶給大家css如何做出0.5像素的線條,css做出0.5像素線條的注意事項有哪些,下面就是實戰案例,一起來看一下。

公司的設計師在做設計圖的時候都是以iphone6(寬為750實體像素)為基準進行設計的。 iphone6的裝置像素比(也就是css像素與實體像素的比例)是2,所以設計師在設計圖畫了邊框為1px的box的時候,相對於css程式碼來說就是0.5像素。

對於這個問題,最直觀的方法就是css直接設定邊框為0.5px,經過測試,iPhone可以正常顯示,android下方幾乎所有的瀏覽器都會把0.5識別為0 ,即無邊框狀態,所以這種方式行不通

CSS3有縮放的屬性,我們可以利用這個屬性,縮小50%的1px的邊框,來實現這個功能,具體實現代碼如下

<p class="border3">
    <p class="content">伪类设置的边框</p>
</p>

css:

.border3{
     position: relative;          
 }
 
.border3:before{
       content: '';
       position: absolute;
       width: 200%;
       height: 200%;
       border: 1px solid red;
       -webkit-transform-origin: 0 0;
       -moz-transform-origin: 0 0;
       -ms-transform-origin: 0 0;
       -o-transform-origin: 0 0;
       transform-origin: 0 0;
       -webkit-transform: scale(0.5, 0.5);
       -ms-transform: scale(0.5, 0.5);
       -o-transform: scale(0.5, 0.5);
       transform: scale(0.5, 0.5);
       -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
       box-sizing: border-box;
}

實現想法:

1、設定目標元素的參考位置

2、為目標元素加上一個偽元素before或after,並且設定絕對定位

3、為偽元素添加1px的邊框

4、用box-sizing: border-box 屬性把邊框都包進寬和高裡面

5、寬和高設定為200%

6、整個盒子模型縮小為0.5

7、調整盒子模型的位置,以左上角為基準transform-origin: 0 0;

實現結果在iphone顯示如下:

相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!

推薦閱讀:

css3的pointer-events使用詳解

focus-within的使用詳解

#

以上是css如何做出0.5像素的線條的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn