CSS中的box效果是指改變頁面元素的邊框、背景、陰影等屬性，讓頁面看起來更加美觀、生動。下面介紹幾種常用的box效果。

/* 1. 邊框效果 */
.box{
border: 2px solid #666; /* 線性邊框 */
border-radius: 10px; /* 圓角邊框 */
border-bottom: 5px dotted #999; /* 虛線邊框 */
}
/* 2. 背景效果 */
.box{
background-color: #ccc; /* 純色背景 */
background-image: url(bg.jpg); /* 圖片背景 */
background-repeat: repeat-y; /* 背景縮放方式 */
background-size: 100px 100px; /* 背景大小 */
}
/* 3. 盒子陰影效果 */
.box{
box-shadow: 1px 1px 5px #999; /* 盒子陰影 */
text-shadow: 1px 1px 1px #999; /* 文字陰影 */
}
/* 4. 內邊距和外邊距 */
.box{
padding: 10px; /* 內邊距 */
margin: 10px; /* 外邊距 */
margin-top: 20px; /* 上外邊距 */
margin-bottom: 20px; /* 下外邊距 */
margin-left: auto; /* 左外邊距自動 */
margin-right: auto; /* 右外邊距自動 */
}

以上這些是常用的box效果，有了它們，我們可以輕松地制作出漂亮的網頁界面，更加優化用戶的視覺體驗。在實際開發中，也可以根據自己的需要靈活運用這些效果實現更多的視覺效果。