CSS小球放入盒模型是一項常用的技巧，它能夠為網站增添生動和豐富性。下面我們一起來了解如何實現。

.ball {
width: 50px;  /* 設置小球的寬度 */
height: 50px;  /* 設置小球的高度 */
border-radius: 25px;  /* 將小球設置為圓形 */
background-color: red;  /* 設置小球的背景顏色 */
position: absolute;  /* 設置小球的定位為絕對定位 */
}

上述代碼是創(chuàng)建一個50px*50px的紅色小球并將其設置為圓形樣式。其中，border-radius屬性設置為25px可以讓小球的兩個半徑相等，從而形成一個圓形。

.container {
width: 400px;  /* 設置容器的寬度 */
height: 400px;  /* 設置容器的高度 */
background-color: blue;  /* 設置容器的背景顏色 */
position: relative;  /* 設置容器的定位為相對定位 */
}
.container .ball {
left: 50%;  /* 設置小球距離容器左邊界的距離為容器寬度的1/2 */
top: 50%;  /* 設置小球距離容器上邊界的距離為容器高度的1/2 */
transform: translate(-50%, -50%);  /* 使小球居中顯示 */
}

下面，我們來創(chuàng)建一個容器，并將小球放入其中。上述代碼設置了容器的大小和背景顏色，并將其定位為相對定位（這是因為小球的定位是以容器為基準的）。對于小球的樣式，我們將其left和top屬性值分別設為50%（也就是容器寬度和高度的一半），加上CSS3新屬性transform，使用translate函數來實現小球居中顯示。

因此，我們完成了將小球放入盒模型的技巧，你可以嘗試在你的網站中使用這一技巧，讓頁面增添更多的趣味性和動感性。