注：由于所有形狀的圖解數量實在太多，不能全都列出，以下僅是一些常見形狀的圖解和相應代碼示例。
CSS提供了豐富的形狀選項，可以使用各種形狀來裝飾網頁。這些形狀可以通過簡單的CSS代碼實現，讓你的網頁看起來更加精美和吸引人。
1. 圓形
.circle {
width: 50px;
height: 50px;
border-radius: 50%;
}
2. 矩形
.square {
width: 50px;
height: 50px;
}
.rectangle {
width: 100px;
height: 50px;
}
3. 三角形
.triangle {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 50px solid #f00;
border-left: 50px solid transparent;
}
4. 梯形
.trapezoid {
width: 100px;
height: 0;
border-top: 50px solid #f00;
border-right: 25px solid transparent;
border-bottom: 0 solid transparent;
border-left: 25px solid transparent;
}
5. 菱形
.rhombus {
width: 50px;
height: 50px;
transform: rotate(45deg);
background-color: #f00;
}
6. 橢圓形
.ellipse {
width: 100px;
height: 50px;
border-radius: 50%;
}
7. 波浪形
.wave {
width: 100px;
height: 50px;
background: #f00;
position: relative;
}
.wave::before, .wave::after {
content: "";
display: block;
width: 100px;
height: 10px;
background: #fff;
position: absolute;
bottom: -10px;
border-radius: 50%;
}
.wave::before {
left: -30px;
transform: scaleX(1.5);
}
.wave::after {
right: -50px;
transform: scaleX(2);
}
8. 橄欖球形
.oval {
width: 100px;
height: 50px;
border-radius: 100px/50px;
}
除了以上這些常見的形狀之外，CSS還提供了許多其他形狀的選項，可以通過不同的屬性和值進行自定義。在使用這些形狀時，我們需要注意瀏覽器的兼容性，以確保最終效果的一致性。