在CSS中,空心圓單詞是"border-radius"。
.circle { width: 100px; height: 100px; border: 2px solid #000; border-radius: 50%; /* 將正方形變成圓形 */ }
通過設置“border-radius”的值為50%,我們可以創建一個空心圓形的div元素。該值也可以設置成其他百分比,這取決于所需的結果。 除了“border-radius”屬性之外,我們還可以使用“border”屬性來創建空心圓的效果。
.circle { width: 100px; height: 100px; border: 10px solid #000; border-radius: 50%; /* 將正方形變成圓形 */ box-sizing: border-box; /* 防止邊框撐大 */ }
在這個例子中,“border”屬性設置為10像素使其看起來像圓環,而“border-radius”屬性仍然設置為50%以創建圓形外觀。
請記住,雖然空心圓通常是在頁面中的裝飾性元素,但是在某些情況下,它們可以用于創建交互式控件,例如復選框和單選按鈕。