更新時間:2023-01-11 來源:黑馬程序員 瀏覽量:
在網(wǎng)頁制作中,經(jīng)常需要對盒子添加陰影效果。CSS3中的box-shadow屬性可以多實現(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ù)值。其中,“陰影類型”默認outset更改為inset后,陰影類型則變?yōu)閮?nèi)陰影。
當一個盒子的總寬度確定之后,要想給盒子添加邊框或內(nèi)邊距,往往需要更改width屬性值,才能保證盒子總寬度不變。但是這樣的操作煩瑣且容易出錯,運用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標準,當定義width和height時它的參數(shù)值不包括border和padding。
border-box:當定義width和height時,border和padding的參數(shù)值被包含在width和height之內(nèi)
【AI設(shè)計】北京143期畢業(yè)僅36天,全員拿下高薪offer!黑馬AI設(shè)計連續(xù)6期100%高薪就業(yè)
2025-09-19【跨境電商運營】深圳跨境電商運營畢業(yè)22個工作日,就業(yè)率91%+,最高薪資達13500元
2025-09-19【AI運維】鄭州運維1期就業(yè)班,畢業(yè)14個工作日,班級93%同學已拿到Offer, 一線均薪資 1W+
2025-09-19【AI鴻蒙開發(fā)】上海校區(qū)AI鴻蒙開發(fā)4期5期,距離畢業(yè)21天,就業(yè)率91%,平均薪資14046元
2025-09-19【AI大模型開發(fā)-Python】畢業(yè)33個工作日,就業(yè)率已達到94.55%,班均薪資20763元
2025-09-19【AI智能應(yīng)用開發(fā)-Java】畢業(yè)當天offer率91%,薪資1W+占比54.2%,班級均薪12k+
2025-09-19