CSS能夠繪制弧形，可能許多人并不知道。常見的截斷圓形方法通常是使用clip-path屬性。但如果想要絲滑流暢的圓弧圖形，這種方法就不適用了。

實現一個圓弧的方法是使用linear-gradient或者radial-gradient屬性。當我們創建一個gradual漸變時，我們可以在color-stop中使用透明的顏色值來實現所需的效果。

/* 創建一個半圓的div */
div {
width: 100px;
height: 50px;
background-image: linear-gradient(to right, #f0f, #f0f 50%, transparent 50%);
border-radius: 50% 50% 0 0;
}
/* 創建一個帶有弧度的div  */
div {
width: 100px;
height: 100px;
background-image: radial-gradient(circle at top left, #f1c40f,
#f1c40f 50%,
transparent 50%,
transparent);
border-radius: 0 0 0 100%;
}

以上代碼通過線性漸變函數linear-gradient以及徑向漸變函數radial-gradient繪制出半圓與一側弧度兩種圖形效果，通過使用border-radius屬性，以百分比方式設置弧度的圓角屬性值。實際上這個方法可以實現任何弧度的形狀，只需變更漸變方式的值即可。