在 CSS 中畫一條弧線雖然不難，但卻需要一定的數(shù)學(xué)常識。本文將介紹如何使用 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; /* 調(diào)整位置 */
left: -1px; /* 調(diào)整位置 */
transform: rotate(45deg); /* 旋轉(zhuǎn)45度，成為斜切橢圓 */
clip: rect(0px, 50px, 100px, 0px); /* 限制顯示區(qū)域 */
}以上代碼中，我們首先使用了一個 `
` 元素，并為其添加了 `border-radius: 50%` 屬性，將它變成了一個圓形。然后，我們再為 `.curve` 元素添加了一個偽元素 `:before`，并設(shè)置它的 `border-radius: 50%`、`transform: rotate(45deg)` 和 `clip: rect(0px, 50px, 100px, 0px)` 屬性，將它變成了一個斜切橢圓，并限制了它的顯示區(qū)域。最后，我們將 `.curve:before` 放置在 `.curve` 元素的上方，并微調(diào)它的位置，以達(dá)到最終的弧線效果。
運行上述代碼，我們就可以看到一個簡單的弧線效果了。