CSS3中怎樣給盒子添加陰影效果？

在網(wǎng)頁制作中，經(jīng)常需要對盒子添加陰影效果。CSS3中的box-shadow屬性可以多實(shí)現(xiàn)陰影的添加，其基本語法格式如下:

box-shadow: h-shadow v-shadow blur spread color outset ;

在上面的語法格式中，box-shadow屬性共包含6個參數(shù)值，如表1所示。

列舉了box-shadow屬性參數(shù)值，其中h-shadow和v-shadow為必選參數(shù)值不可以省略，其余為可選參數(shù)值。其中，“陰影類型”默認(rèn)outset更改為inset后，陰影類型則變?yōu)閮?nèi)陰影。

當(dāng)一個盒子的總寬度確定之后，要想給盒子添加邊框或內(nèi)邊距，往往需要更改width屬性值，才能保證盒子總寬度不變。但是這樣的操作煩瑣且容易出錯，運(yùn)用CSS3的box-sizing屬性可以輕松解決這個問題。box-sizing屬性用于定義盒子的寬度值和高度值是否包含內(nèi)邊距和邊框，其基本語法格式如下:

box-sizing: content-box/border-box;

上述語法格式中，box-sizing屬性的取值可以為content-box或border-box，關(guān)于這兩個值的相關(guān)介紹如下。

content-box:瀏覽器對盒子模型的解釋遵從W3C標(biāo)準(zhǔn)，當(dāng)定義width和height時(shí)它的參數(shù)值不包括border和padding。

border-box:當(dāng)定義width和height時(shí)，border和padding的參數(shù)值被包含在width和height之內(nèi)