在 CSS 中畫一條弧線雖然不難，但卻需要一定的數學常識。本文將介紹如何使用 CSS 畫出一個簡單的弧線。
.curve {
border: 1px solid black;
width: 100px;
height: 100px;
border-radius: 50%;
position: relative;
}
.curve:before {
content: "";
display: block;
width: 100%;
height: 100%;
border: 1px solid black;
border-radius: 50%;
position: absolute;
top: -1px; /* 調整位置 */
left: -1px; /* 調整位置 */
transform: rotate(45deg); /* 旋轉45度，成為斜切橢圓 */
clip: rect(0px, 50px, 100px, 0px); /* 限制顯示區域 */
}以上代碼中，我們首先使用了一個 `
` 元素，并為其添加了 `border-radius: 50%` 屬性，將它變成了一個圓形。然后，我們再為 `.curve` 元素添加了一個偽元素 `:before`，并設置它的 `border-radius: 50%`、`transform: rotate(45deg)` 和 `clip: rect(0px, 50px, 100px, 0px)` 屬性，將它變成了一個斜切橢圓，并限制了它的顯示區域。最后，我們將 `.curve:before` 放置在 `.curve` 元素的上方，并微調它的位置，以達到最終的弧線效果。
運行上述代碼，我們就可以看到一個簡單的弧線效果了。