在CSS中定義圓形有多種方法,常見的有以下幾種:
.circle { width: 100px; height: 100px; border-radius: 50%; background-color: red; } .circle::before { content: ""; display: block; width: 100px; height: 100px; border-radius: 50%; background-color: blue; } .circle::after { content: ""; display: block; margin: 0 auto; width: 0; height: 0; border-top: 50px solid red; border-right: 50px solid transparent; border-bottom: 50px solid red; border-left: 50px solid transparent; border-radius: 50%; }
第一種方法是使用border-radius屬性,將寬高設為相等的值,同時border-radius設為50%即可創建圓形元素。
第二種方法是使用偽元素,在元素前后插入一個空的偽元素,再將寬高設為相等的值,border-radius設為50%,這樣就可以創建一個圓形元素。
第三種方法是使用偽元素,設置border屬性,利用border的特性創建一個三角形,然后將偽元素設為圓形,border-radius為50%,也可以實現圓形元素。
上一篇css學習重要性
下一篇css左側彈出子彈窗