CSS可以很方便地繪制矩形框，下面我們來(lái)學(xué)習(xí)如何實(shí)現(xiàn)。

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

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

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

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

在這個(gè)例子中，我們給矩形框添加了背景色、圓角邊框以及陰影效果，讓矩形框看起來(lái)更加優(yōu)美。其中box-shadow屬性可以設(shè)置矩形框的陰影效果，通過(guò)調(diào)整這個(gè)屬性，可以制造出各種不同的陰影效果。

總之，使用CSS繪制矩形框非常簡(jiǎn)單，并且可以根據(jù)需要靈活地調(diào)整樣式，讓頁(yè)面看起來(lái)更加美觀、優(yōu)雅。