在網頁設計中，色塊是視覺設計的重要元素之一。通過合理使用色塊，可以使網頁一覽無余，整潔美觀。下面我們來學習如何使用CSS實現色塊。

/* css代碼開始 */
.color-block {
width: 100px;
height: 100px;
background-color: #f00;
}
/* css代碼結束 */

如上述代碼所示，我們使用了一個類名為“color-block”的div元素，設置了寬高為100像素，紅色的背景顏色?？梢酝ㄟ^修改背景顏色代碼實現不同的色塊效果。

/* css代碼開始 */
.color-block {
width: 100px;
height: 100px;
background-color: #0f0;
border: 1px solid #000;
}
/* css代碼結束 */

在上述代碼基礎上，我們再加上了一個黑色的1像素粗邊框，使得色塊更加醒目。另外，還可以通過添加圓角屬性，實現圓角矩形的色塊效果。

/* css代碼開始 */
.color-block {
width: 100px;
height: 100px;
border-radius: 10px;
background-color: #00f;
border: 1px solid #000;
}
/* css代碼結束 */

以上就是使用CSS實現色塊效果的基礎代碼。希望能對您在網頁設計中的應用有所幫助，同時也希望您能根據個人需要不斷地改進和創新。