H5行動端 超實用的css3模擬邊框最新研究範例程式碼
- 黄舟原創
- 2017-03-10 16:54:221949瀏覽
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 是可以模擬四條邊中的任意一條邊的.因此,才寫下這篇博文.
<!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##總結
- #利用了
- box-shadow
的屬性可以無限重複特性,可以透過不斷的填充,來滿足我們的需求.
並且, - box-shadow
可以只設定兩個值,這樣就沒有擴展,沒有虛化,一比一的移動.
- box -shadow
的缺點依然存在,就是只能模擬實線,不能模擬虛線
#在圓角的運用上,需要更好的計算,反正是利用多重覆蓋的特性 - 做1px的邊框,是最簡單的.
以上是H5行動端 超實用的css3模擬邊框最新研究範例程式碼的詳細內容。更多資訊請關注PHP中文網其他相關文章！