更新時(shí)間:2023-01-11 來(lái)源:黑馬程序員 瀏覽量:
在網(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ù)值。其中,“陰影類型”默認(rèn)outset更改為inset后,陰影類型則變?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)