在CSS中怎么畫圓呢?其實很簡單,只需要掌握border-radius屬性即可。這個屬性可以設置元素的四個角為圓角,也可以設置為橢圓形。
.example{ width: 100px; height: 100px; border-radius: 50%; }
在上面的代碼中,通過設置元素的寬度和高度相同,以及設置border-radius為50%,就可以得到一個圓形的效果。
如果想要創建不同半徑的圓形,只需要修改border-radius的值即可。
.small-circle{ width: 50px; height: 50px; border-radius: 25px; } .large-circle{ width: 200px; height: 200px; border-radius: 100px; }
上述代碼創建了兩個圓形,分別是直徑為50像素的小圓和直徑為200像素的大圓。
如果想要創建橢圓形,只需要將border-radius的兩個值分別設置為水平和垂直的半徑即可。
.ellipse{ width: 150px; height: 100px; border-radius: 75px / 50px; }
上述代碼就創建了一個水平半徑為75像素,垂直半徑為50像素的橢圓形。
總結來說,畫圓和橢圓在CSS中非常容易,只需要通過設置border-radius的值即可輕松創建各種形狀的圓形。