CSS3中可以通過使用border-radius屬性來創建圓形形狀。而如果我們希望創建一個等比例的圓,該怎么做呢?下面是一些方法:
.circle { width: 4em; /* 也可以用其他寬度 */ height: 4em; border-radius: 50%; /* 設置為50%表示正圓形 */ }
以上代碼使用了border-radius屬性,將其設置為50%就可以創建一個正圓形,而通過指定元素的寬度和高度來確保比例一致。
.circle { width: 4em; height: 4em; border-radius: 4em; /* 直接設置半徑 */ }
還可以直接將border-radius設置為一個具體的像素值,這里設置為4em即圓的半徑。
.circle { width: 4em; height: 4em; border-radius: 9999px; /* 設置為一個非常大的值 */ }
還有一個小技巧,就是將border-radius設置為一個非常大的值,例如9999px。這樣做的效果其實就是將元素的頂點移向了極遠處,使其變成了一個圓形。