CSS中的box屬性主要用于設(shè)置盒子的樣式和布局。其中包含了box-sizing、box-shadow、border-box和transform等子屬性。

box-sizing子屬性可以設(shè)置元素的尺寸計算方式，有兩種取值：content-box和border-box。默認為content-box，即元素的尺寸只包括內(nèi)容區(qū)域，不包括邊框和內(nèi)邊距。而border-box則是將邊框和內(nèi)邊距也計算在元素的尺寸內(nèi)。

.box{
box-sizing: border-box;
width: 200px;
height: 100px;
border: 1px solid #ccc;
}

box-shadow子屬性可以為元素添加陰影。它有多個參數(shù)，包括陰影的偏移量、模糊半徑、陰影擴散半徑、顏色等。

.box{
box-shadow: 5px 5px 5px #888;
}

border-box子屬性可以將元素的邊框和內(nèi)邊距計算在元素尺寸之內(nèi)，這樣可以避免使用calc()函數(shù)來計算寬度。

.box{
box-sizing: border-box;
}

transform子屬性可以用來旋轉(zhuǎn)、縮放、平移和傾斜元素。比如下面的代碼可以讓鼠標移入盒子時，盒子以45度的角度旋轉(zhuǎn)。

.box:hover{
transform: rotate(45deg);
}