《css揭秘》一直很期待這本書(shū)啊终，終于入手了。果斷的要試一試書(shū)中的例子。
第一個(gè)例子是 半透明邊框
首先看看我做出來(lái)的樣子佛玄。個(gè)人覺(jué)得半透明邊框很實(shí)用，可以用在書(shū)籍，電影資料的展示上圈驼。
實(shí)現(xiàn)起來(lái)也不難。
其中關(guān)鍵是要了解 CSS3 background-clip 屬性
background-clip 有3個(gè)值
- border-box 背景會(huì)延伸到邊框區(qū)域的下層。默認(rèn)值名挥。
- padding-box 背景繪制在邊框內(nèi)部参淫，不會(huì)超出邊框鞋既。
- content-box 背景繪制在內(nèi)容方框內(nèi)涛救。
上栗子：
當(dāng)background-clip: border-box;時(shí)程储，會(huì)顯示成下圖的樣子，實(shí)色的虛線(xiàn)邊框看起來(lái)更明顯。下層的白色背景會(huì)從虛線(xiàn)的空隙中露出來(lái)煤杀。如果邊框是透明的，就會(huì)隱藏在白色背景中忌怎，看不到了晚岭。這不是我們想要的酝润。
css 代碼
background-clip: border-box;
border： 20px dashed #58a;
background: #fff;
當(dāng)background-clip: padding-box;時(shí)纤掸，白色背景層完全在虛線(xiàn)邊框的里面，這個(gè)看起來(lái)正適合。
css 代碼
background-clip: padding-box;
border： 20px dashed #58a;
background: #fff;
當(dāng)background-clip: content-box;時(shí)辛掠，白色背景被切掉了船侧，產(chǎn)生了空隙队塘。
css 代碼
background-clip: content-box;
border： 20px dashed #58a;
background: #fff;
從上面的例子看鸿市，用background-clip: padding; 就可以實(shí)現(xiàn)内舟。
只要把實(shí)色虛線(xiàn)邊框改成透明實(shí)線(xiàn)邊框保檐。
書(shū)中用的是 hsla()來(lái)實(shí)現(xiàn)透明顏色，沒(méi)看這本書(shū)之前我還真的對(duì)hsla不太了解
查了才知道
H：Hue(色調(diào))。0(或360)表示紅色，120表示綠色耘成，240表示藍(lán)色嘹朗，也可取其他數(shù)值來(lái)指定顏色怔檩。取值為：0 - 360
S：Saturation(飽和度)仑氛。取值為：0.0% - 100.0%
L：Lightness(亮度)。取值為：0.0% - 100.0%
A：Alpha透明度。取值0~1之間加派。
透明顏色可以這樣寫(xiě)：
hsla(0,0%,100%,.5);
前兩個(gè)值，寫(xiě)什么都無(wú)所謂，因?yàn)榱炼?00%
添加到代碼片段里
css 代碼
background-clip: padding-box;
border： 20px solid hsla(0,0%,100%,.5);
background: #fff;
半透明邊框實(shí)現(xiàn)了
暗色的半透明邊框感覺(jué)酷酷的
只要把 hsla() 的亮度值改為0%杏慰。hsla(0,0%,0%,.5)
以上就是《css揭秘》半透明邊框實(shí)例
ps:圖書(shū)封面圖，來(lái)自網(wǎng)絡(luò)榛斯。
