標籤：
移動端H5 css3類比邊框最新研究(超實用) by FungLeo前言在之前寫的一篇博文《移動端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功底還是不夠強,還要努力學習呀.
上次我閑來無事,用一個DIV寫了一套字母數字表 查看DEMO.雖然用到了相關的知識點,但是還是沒有往類比邊框的這條思路上靠.
今天仔細一想,原來 box-shadow 是可以類比四條邊中的任意一條邊的.因此,才寫下這篇博文.
語言太多,都不如直接看代碼:
html代碼<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <div class="box sibian"></div> <div class="box shangbian"></div> <div class="box xibian"></div> <div class="box zuobian"></div> <div class="box youbian"></div> <div class="box zuoshangbian"></div> <div class="box youshangbian"></div> <div class="box zuoxiabian"></div> <div class="box youxiabian"></div> <div class="box wushangbian"></div> <div class="box wuyoubian"></div> <div class="box wuxiabian"></div> <div class="box wuzuobian"></div></body></html>.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 的缺點依然存在,就是只能類比實線,不能類比虛線本文由FungLeo原創,允許轉載.但轉載必須署名作者,並保留文章首發連結.否則將追究法律責任.
首發地址: http://blog.csdn.net/FungLeo/article/details/51396410
移動端H5 css3類比邊框最新研究(超實用) by FungLeo
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
