CSS畫一個圓通常有兩種方法:
第一種方法是使用border-radius屬性,將元素的四個角設置為圓角,同時將width和height設置為相等的值,即可繪制出一個圓形元素。代碼如下:
.circle{ width: 100px; height: 100px; border-radius: 50%; background-color: #f00; }
第二種方法是使用偽元素,利用transform屬性將一個正方形元素旋轉45度,即可得到一個圓形元素。代碼如下:
.circle{ width: 100px; height: 100px; background-color: #f00; position: relative; } .circle::before{ content: ""; display: block; width: 100%; height: 100%; border-radius: 50%; background-color: #f00; position: absolute; top: 0; left: 0; transform: rotate(45deg); }
以上兩種方法都可以畫出圓形元素,根據實際需求可以靈活選擇。