CSS3 Box是CSS3中常用的一種盒子布局模型,它包含一個元素的內邊距、邊框和外邊距。
.box { padding: 10px; border: 2px solid #ccc; margin: 20px; }
上述代碼定義了一個類名為box的元素,它有10px的內邊距、2px的邊框和20px的外邊距。在CSS3中,我們可以使用更多的屬性來對盒子進行控制。
一些常用的CSS3盒子屬性包括:
box-sizing
:設置盒子的尺寸計算模式,可以為content-box
(默認),border-box
或padding-box
。border-radius
:設置盒子的圓角半徑。box-shadow
:設置盒子的陰影效果。background-clip
:設置背景圖片或顏色的顯示區域,可以為border-box
、padding-box
或content-box
。
.box { box-sizing: border-box; border-radius: 5px; box-shadow: 2px 2px 5px #ccc; background-clip: padding-box; }
上述代碼設置了盒子的尺寸計算模式為border-box
,設置了圓角半徑為5px
,設置了盒子的陰影效果以及背景圖片或顏色的顯示區域為padding-box
。
總之,CSS3 Box為我們提供了更多強大的方式來控制頁面元素的盒子模型,使得我們能夠更方便地實現各種各樣的布局效果。
上一篇css3columns
下一篇css3box技巧