10. 盒陰影
box-shadow 屬性可以對(duì)HTML元素添加陰影 而不用額外的標(biāo)簽或背景圖片。類似text-shadow 屬性，它增強(qiáng)設(shè)計(jì)的細(xì)節(jié)；而且因?yàn)樗挥绊憙?nèi)容的可讀性，隨意他可以是增加那種額外感覺/效果的一種很好的方法。
10to1 為它的導(dǎo)航背景和hover狀態(tài)使用了box-shadow 屬性.
10to1 為其導(dǎo)航區(qū)域增加的一個(gè)簡單的陰影并將該屬性應(yīng)用于導(dǎo)航鏈接的hover效果: #navigation {
-webkit-box-shadow: 0 0 10px #000;
-moz-box-shadow: 0 0 10px #000;
}
#navigation li a:hover,
#navigation li a:focus {
-webkit-box-shadow: 0 0 5px #111;
-moz-box-shadow: 0 0 5px #111;
} box-shadow屬性可以用多個(gè)值：水平偏移、垂直偏移、模糊半徑、伸展半徑和陰影顏色。水平和垂直偏移和陰影色使用的最多。
在一個(gè)div上應(yīng)用紅色陰影，右邊和下邊偏移4px，無模糊，我們可以使用下面的代碼： div {
-moz-box-shadow: 4px 4px 0 #f00;
-webkit-box-shadow: 4px 4px 0 #f00;
box-shadow: 4px 4px 0 #f00;
} 瀏覽器支持: box-shadow目前只有Webkit核心瀏覽器支持，但是即將發(fā)布的Firefox 3.5 也將提供很好的支持。
擴(kuò)展閱讀：
出處：藍(lán)色理想
責(zé)任編輯：bluehearts
上一頁 邊框圖片 下一頁 盒子大小
◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。
|
第 1 頁 
第 10 頁 盒陰影
