最近在閱讀CSS Secrets這本書(shū)，發(fā)現(xiàn)作者講解了很多容易被忽略的CSS小技巧懂昂，感受到作者在寫(xiě)代碼的過(guò)程中介时，不僅僅只是思考如何實(shí)現(xiàn)各種效果，更多的會(huì)去思考和權(quán)衡代碼如何寫(xiě)出來(lái)更優(yōu)雅忍法、更簡(jiǎn)潔潮尝，并且后期維護(hù)更方便。
我在閱讀的過(guò)程中饿序，整理了這些技巧勉失，并且按照自己的理解制作了簡(jiǎn)單的demo。
1. 半透明邊框
有時(shí)候我們希望父容器的背景能夠通過(guò)子容器的邊框透出來(lái)原探，一般我們會(huì)通過(guò)設(shè)置子容器邊框的透明度來(lái)實(shí)現(xiàn)乱凿。但事實(shí)上，父容器的背景只會(huì)延伸到子容器邊框的外延咽弦，容器邊框半透明只會(huì)顯示當(dāng)前容器的背景徒蟆。
這是因?yàn)樽尤萜?strong>background-clip屬性的默認(rèn)值為border-box，表示父容器的背景在子容器的邊框外延被裁掉型型。因此設(shè)置子容器的background-clip:padding-box就能實(shí)現(xiàn)半透明邊框段审。
另外擴(kuò)展一下，如果background-clip的屬性為content-box闹蒜，那么父容器的背景就能延伸到子容器的內(nèi)邊距里了寺枉。
下圖是background-clip的屬性值不同時(shí)的表現(xiàn)：
筆記
- 直接給border的顏色hsla或者rgba實(shí)現(xiàn)半透明，不會(huì)將背景通過(guò)邊框透出來(lái)
- 默認(rèn)情況下绷落，背景會(huì)延伸到邊框所在的區(qū)域下層
- 利用CSS3屬性background-clip:padding-box可以讓背景在內(nèi)邊距的外延被裁掉姥闪，而不是邊框。
2. 多重邊框
實(shí)現(xiàn)多重邊框的方式很多砌烁，兼容性最好的應(yīng)該是利用多個(gè)容器嵌套制造視覺(jué)上的邊框假象筐喳。但是Lea Verou總是強(qiáng)調(diào)代碼DRY，多個(gè)容器嵌套會(huì)造成代碼的冗余，因此她介紹了通過(guò)box-shadow和outline實(shí)現(xiàn)多重邊框避归。
2.1 多重邊框（box-shadow）
利用box-shadow實(shí)現(xiàn)邊框的重點(diǎn)是利用了box-shadow屬性中的spread荣月，即只給第四個(gè)參數(shù)賦值。由于box-shadow支持逗號(hào)分隔槐脏，因此可以創(chuàng)建無(wú)限個(gè)投影邊框喉童。
由于box-shadow會(huì)相互疊加撇寞，因此每一層投影的spread都應(yīng)該比前一層更大才能實(shí)現(xiàn)多重投影顿天。
此外，box-shadow不會(huì)影響布局蔑担，因此如果使用該屬性產(chǎn)生邊框的話牌废，應(yīng)該提前預(yù)留其所占據(jù)的空間。
下面是利用box-shadow實(shí)現(xiàn)的簡(jiǎn)單案例和關(guān)鍵代碼：
筆記
- 擴(kuò)張半徑（第四個(gè)參數(shù)）指定邊框?qū)挾绕∥眨屏亢湍：禐?
- 可創(chuàng)建任意數(shù)量的投影
- 每一層的投影相互疊加
- 不影響布局和鼠標(biāo)事件
- 利用inset關(guān)鍵字和元素的內(nèi)邊距可以讓投影出現(xiàn)的元素內(nèi)圈
- 不能實(shí)現(xiàn)虛線邊框
- 代碼書(shū)寫(xiě)重點(diǎn)：box-shadow: 0 0 0 10px red,0 0 0 15px yellow
2.2 多重邊框（outline）
outline的兼容性相對(duì)于box-shadow要好一點(diǎn)鸟缕，不過(guò)其最多只能實(shí)現(xiàn)兩重邊框，而且不支持圓角排抬。
下面是利用outline實(shí)現(xiàn)的簡(jiǎn)單案例和關(guān)鍵代碼：
筆記
- 可以實(shí)現(xiàn)帶虛線的邊框
- 最多只能定義兩重邊框
- 不能貼合border-radius產(chǎn)生的圓角
3.邊框內(nèi)圓角
理想實(shí)現(xiàn)效果是：容器邊框的內(nèi)側(cè)是圓角懂从，外側(cè)依舊保持直角。
主要有兩種方案來(lái)實(shí)現(xiàn)這個(gè)效果蹲蒲，方案一是利用兩個(gè)容器番甩，子容器擁有圓角，父容器稍大于子容器且為直角届搁。方案二是結(jié)合box-shadow和outline實(shí)現(xiàn)缘薛。
3.1 邊框內(nèi)圓角（2 divs）
這種方案不做過(guò)多的闡述，直接上圖和關(guān)鍵代碼：
3.2 邊框內(nèi)圓角（1 divs）
由于outline不會(huì)填補(bǔ)圓角而box-shadow會(huì)卡睦，因此利用outline實(shí)現(xiàn)邊框宴胧，而boxshadow來(lái)填補(bǔ)outline和容器之間的圓角空隙。
筆記
- 結(jié)合box-shadow和outline
- outline不會(huì)填補(bǔ)元素的圓角表锻，而box-shadow會(huì)
- box-shadow陰影的擴(kuò)張值計(jì)算公式：0.414 * r < x ≤ w （其中x:陰影的擴(kuò)張值恕齐；r:圓角半徑；w:outline寬度）
- 設(shè)置技巧：x=w瞬逊，box-shadow的color與outline的color值一致
結(jié)語(yǔ)
Lea Verou介紹的這幾種關(guān)于border的設(shè)置技巧显歧，讓作為網(wǎng)頁(yè)重構(gòu)菜鳥(niǎo)的我受益匪淺。這些屬性其實(shí)是最常見(jiàn)的码耐，平時(shí)工作中或多或少都會(huì)用到追迟，但是利用它們的特征去巧妙地實(shí)現(xiàn)一些看似不相關(guān)的視覺(jué)效果卻是我們很少想到的。也許在工作中骚腥，有些方法并不能滿足我們向下兼容各種低級(jí)瀏覽器的需求敦间，但是技術(shù)一直在更新，有時(shí)候需要在保證可讀性的前提下，適當(dāng)摒棄低級(jí)瀏覽器的視覺(jué)效果廓块。即使不能放棄低級(jí)瀏覽器厢绝，Lea Verou也推薦了一些解決兼容性的方法。
附上文中整理出來(lái)的簡(jiǎn)單demo的地址：http://www.qdfuns.com/notes/41216/d247b7c530352ed22245aacabbc18a5f.html
