在CSS中,我們可以通過border-radius屬性輕松畫出圓形。border-radius可以指定一個或多個圓角半徑,定義元素的圓角形狀。例如,要畫一個半徑為50px的圓形,可以這樣寫CSS代碼:
.circle { border-radius: 50%; width: 100px; height: 100px; background-color: #f00; }
上面的代碼中,border-radius值為50%,意味著四個角都是半徑為元素寬度的50%的圓角,此時元素就成為了一個圓形。同時,由于圓的寬高相等,我們還需要設置元素的寬和高為100px,這樣才能成為完整的圓形。
如果需要畫出其他半徑的圓,只需要將border-radius的值改為對應的值即可。例如,要畫一個半徑為20px的圓形,可以這樣寫CSS代碼:
.circle { border-radius: 20px; width: 40px; height: 40px; background-color: #f00; }
這里把border-radius的值改為20px,同時將元素的寬和高都設置為40px,得到一個半徑為20px的圓形。