CSS中的矩形是網(wǎng)頁設(shè)計(jì)中最基本的形狀之一，可以通過CSS中的屬性來完善矩形的外觀和樣式。

.rectangle {
width: 200px;
height: 100px;
background-color: blue;
border: 2px solid black;
border-radius: 10px;
box-shadow: 2px 2px 5px grey;
}

上述代碼定義了一個(gè)矩形的類，具體屬性如下：

• width：矩形的寬度，設(shè)為200px。
• height：矩形的高度，設(shè)為100px。
• background-color：矩形的顏色，設(shè)為藍(lán)色。
• border：矩形的邊框，2px的黑色實(shí)線。
• border-radius：矩形的邊框圓角，設(shè)為10px，使矩形四個(gè)角都變?yōu)閳A角。
• box-shadow：矩形的陰影，2px的灰色陰影。

通過這些屬性，我們可以創(chuàng)建出一個(gè)簡單但具有立體感和美觀的矩形。

我們還可以通過CSS3中的變換屬性transform來為矩形增加動態(tài)效果。

.rectangle:hover {
transform: rotate(10deg);
}

上述代碼定義了當(dāng)鼠標(biāo)在矩形上懸停時(shí)，該矩形順時(shí)針旋轉(zhuǎn)10度。

使用CSS創(chuàng)建和設(shè)計(jì)矩形是網(wǎng)頁設(shè)計(jì)的重要組成部分。熟練掌握CSS中矩形的屬性和變換，可以幫助我們更好地實(shí)現(xiàn)網(wǎng)頁中的元素效果。