H5行動端超實用的css3模擬邊框最新研究範例程式碼

前言

在之前寫的一篇部落格文章《移動端H5的一些基本知識點總結第五節邊框的處理》中,我提到,可以使用box-shadow:0 0 0 1px #ddd; 這樣的方式,來模擬邊框.當然,博文中的內容並沒有錯,但是卻有一定的局限性.因此,今天在這裡,糾正和完善我之前的博文中的缺陷.

為什麼要模擬邊框,而不是直接寫邊框?
因為邊框要計算盒子模型.而我們在行動端可能使用的是自適應佈局的方式.這樣計算邊框很費勁.
因此,使用模擬邊框的方法,就可以不用考慮邊框的寬度的問題了,這樣更加方便.
當然,使用 box-sizing:border-box 這樣的屬性也可以將邊框不計算在盒子模型裡.
而且這種方法在許多現代CSS框架上都使用著.
但是我個人不推薦這種做法.因為,這樣padding也不計算在盒子模型裡面了.
反正我不喜歡這樣的做法.所以我就模擬邊框啦!

前文回顧

如果你不願意去打開上面的鏈接,看下上一篇博文中說了什麼.這裡我就把兩種關鍵的模擬方法給總結出來.如果不理解,可以去看,如果理解,就直接看下面的內容.

方法一outline 模擬邊框

使用outline: 1px solid #ddd; 這樣的描邊線的方式模擬邊框

##優點: 1. 可以和
border 一樣使用各種線形2. 可以調整邊框到盒子的距離
outline-offset 參數

#缺點: 1. 不能做成貼合圓角元素(這被W3C認為是一個BUG,可能在不遠的將來修復)
2. 只能一下子加到四邊,不能只加一邊.

方法二box-shadow 模擬邊框

使用

box-shadow:0 0 0 1px #ddd; 外發光模擬邊框

優點: 1. 可以貼合圓角元素,產生完美的邊框
2. 可以重複參數,產生多條邊框

缺點: 1. 只有實線線性,不能做虛線

#更多請看我前面的博文,或者百度相關資訊.

box-shadow `可以模擬任意邊的邊框`

我原來以為是做不到的.可見我的CSS功底還是不夠強,還要努力學習呀.

上次我閒來無事,用一個p寫了一套字母數字表查看DEMO.雖然用到了相關的知識點,但是還是沒有往模擬邊框的這條思路上靠.

#今天仔細一想,原來

box-shadow 是可以模擬四條邊中的任意一條邊的.因此,才寫下這篇博文.

語言太多,都不如直接看程式碼:

html程式碼

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>Document</title></head><body>
    <p class="box sibian"></p>
    <p class="box shangbian"></p>
    <p class="box xibian"></p>
    <p class="box zuobian"></p>
    <p class="box youbian"></p>
    <p class="box zuoshangbian"></p>
    <p class="box youshangbian"></p>
    <p class="box zuoxiabian"></p>
    <p class="box youxiabian"></p>
    <p class="box wushangbian"></p>
    <p class="box wuyoubian"></p>
    <p class="box wuxiabian"></p>
    <p class="box wuzuobian"></p></body></html>

登入後複製

CSS程式碼

.box {width: 100px;
height: 100px;background: #f00; 
margin: 50px;float: left;}
.sibian {box-shadow: 0 0 0 5px #000;}
.shangbian {box-shadow: 0 -5px #000;}
.xibian {box-shadow: 0 5px #000;}
.zuobian {box-shadow: -5px 0 #000;}
.youbian {box-shadow: 5px 0 #000;}
.zuoshangbian {box-shadow: -5px -5px #000,-5px 0 #000,0 -5px #000;}
.youshangbian {box-shadow: 5px -5px #000,5px 0 #000,0 -5px #000;}
.zuoxiabian {box-shadow: -5px 5px #000,-5px 0 #000,0 5px #000;}
.youxiabian {box-shadow: 5px 5px #000,5px 0 #000,0 5px #000;}
.wushangbian {box-shadow: 5px 5px #000,5px 0 #000,0 5px #000,-5px 5px #000,-5px 0 #000;}
.wuyoubian {box-shadow: -5px -5px #000,-5px 0 #000,0 -5px #000,-5px 5px #000,0 5px #000;}
.wuxiabian {box-shadow: -5px -5px #000,-5px 0 #000,0 -5px #000,5px -5px #000,5px 0 #000;}
.wuzuobian {box-shadow: 5px -5px #000,5px 0 #000,0 -5px #000,5px 5px #000,0 5px #000;}

登入後複製

查看box-shadow模擬邊框DEMO##總結