CSS可以很方便地繪制矩形框，下面我們來學習如何實現。

.box {
width: 200px;
height: 100px;
border: 1px solid black;
margin: 20px;
}

以上是一個簡單的矩形框的樣式代碼，其中box是我們給矩形框指定的class名。我們可以根據需要設置矩形框的寬度、高度、邊框以及外邊距等樣式屬性。

下面是另一種生成矩形框的樣式代碼：

.box {
width: 200px;
height: 100px;
background-color: #eee;
border-radius: 10px;
box-shadow: 2px 2px 2px rgba(0,0,0,.3);
margin: 20px;
}

在這個例子中，我們給矩形框添加了背景色、圓角邊框以及陰影效果，讓矩形框看起來更加優美。其中box-shadow屬性可以設置矩形框的陰影效果，通過調整這個屬性，可以制造出各種不同的陰影效果。

總之，使用CSS繪制矩形框非常簡單，并且可以根據需要靈活地調整樣式，讓頁面看起來更加美觀、優雅。