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

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

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

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

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

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

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

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

content-box:瀏覽器對(duì)盒子模型的解釋遵從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)