css實(shí)現(xiàn)0.5像素的邊框的示例代碼
我要評論公司的設(shè)計師在做設(shè)計圖的時候都是以iphone6（寬為750物理像素）為基準(zhǔn)進(jìn)行設(shè)計的。iphone6的設(shè)備像素比（即css像素與物理像素的比例）是2，所以設(shè)計師在設(shè)計圖畫了邊框?yàn)?px的box的時候，相對于css代碼來說就是0.5像素。
對于這個問題，最直觀的方法就是css直接設(shè)置邊框?yàn)?.5px，經(jīng)過測試，iPhone可以正常顯示，android下幾乎所有的瀏覽器都會把0.5識別為0，即無邊框狀態(tài)，所以這種方式行不通
CSS3有縮放的屬性，我們可以利用這個屬性，縮小50%的1px的邊框，來實(shí)現(xiàn)這個功能，具體實(shí)現(xiàn)代碼如下
<div class="border3">
<div class="content">偽類設(shè)置的邊框</div>
</div>
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;
}
實(shí)現(xiàn)思路：
1、設(shè)定目標(biāo)元素的參考位置
2、給目標(biāo)元素添加一個偽元素before或者after，并設(shè)置絕對定位
3、給偽元素添加1px的邊框
4、用box-sizing: border-box 屬性把邊框都包進(jìn)寬和高里面
5、寬和高設(shè)置為 200%
6、整個盒子模型縮小為0.5
7、調(diào)整盒子模型的位置，以左上角為基準(zhǔn) transform-origin: 0 0;
實(shí)現(xiàn)結(jié)果在iphone顯示如下：
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
CSS3實(shí)現(xiàn)多背景模擬動態(tài)邊框的效果
前幾天在工作的時候遇到一個問題，項(xiàng)目需要實(shí)現(xiàn)一個效果，當(dāng)鼠標(biāo)移入一個元素的時候，元素出現(xiàn)一個動態(tài)的邊框，通過網(wǎng)上查找資料看到有人推薦可以使用Css3來實(shí)現(xiàn)，后來試了2016-11-08- 這篇文章主要為大家詳細(xì)介紹了CSS3邊框的不同效果實(shí)現(xiàn)代碼，包括CSS3圓角邊框、盒陰影、邊界圖片的制作方法，感興趣的小伙伴們可以參考一下2016-07-01
利用CSS3的線性漸變linear-gradient制作邊框的示例
linear-gradient線條用來制作邊框還是比較給力的,尤其是利用其描邊可以制作一些復(fù)制的邊框效果,這里我們就來看一下利用CSS3的線性漸變linear-gradient制作邊框的示例2016-06-02CSS3實(shí)現(xiàn)多重邊框的方法總結(jié)
CSS3的box-shadow用來制作多重邊框真的比較給力,這也是本文CSS3實(shí)現(xiàn)多重邊框的方法總結(jié)的重點(diǎn),不過在此之前我們還是先來看一下兼容性較好的傳統(tǒng)方式:2016-05-31- 邊框在Web頁面的內(nèi)容塊中非常常用,這里為大家整理了CSS制作邊框效果的技巧總結(jié),尤其是第三種方案的background-origin利用十分討巧,需要的朋友可以參考下2016-05-27
詳解CSS3的box-shadow屬性制作邊框陰影效果的方法
這篇文章主要介紹了CSS3的box-shadow屬性制作邊框陰影效果的方法,box-shadow屬性還是十分強(qiáng)大的,能設(shè)定陰影的水平或垂直位置,以及陰影的顏色和尺寸等,需要的朋友可以參考下2016-05-10利用CSS中l(wèi)inear制作復(fù)雜的邊框效果
這篇文章主要介紹了利用CSS中l(wèi)inear制作復(fù)雜的邊框效果的相關(guān)資料，利用linear-gradient屬性制作絢麗的邊框效果2016-04-26- 半透明的邊框如何實(shí)現(xiàn)？多重邊框如何實(shí)現(xiàn)？這篇文章就是主要針對CSS邊框特效實(shí)現(xiàn)技巧進(jìn)行探究，感興趣的小伙伴們可以參考一下2016-04-26