CSS可以很輕易地實現圓形的效果,其實就是利用border-radius屬性。
.circle { width: 100px; height: 100px; border-radius: 50%; }
上面的代碼就可以把一個div元素變成一個圓形,其中border-radius的值設為50%就是讓元素的四個角都變成圓角,從而變成圓形。
如果你想要一個不完全是圓形的形狀,可以把border-radius設置為一個比較小的值,如下:
.ellipse { width: 200px; height: 100px; border-radius: 50px/25px; }
上面的代碼將寬度和高度比例設為2:1,然后分別設置兩個半徑,水平方向的半徑為50px,垂直方向的半徑為25px,這樣就可以得到一個類似橢圓形的形狀。
值得注意的是,使用border-radius屬性時,圓形并不是一定需要width和height屬性值相等的元素才能實現,因為border-radius屬性的大小是根據元素最終尺寸來計算的。
如果你想要實現更加復雜的圓形效果,可以使用CSS3新增的clip-path屬性。比如,下面的代碼可以實現一個帶有陰影的圓形效果:
.shadow { width: 100px; height: 100px; clip-path: circle(50% at 50% 50%); box-shadow: 0 0 1rem rgba(0, 0, 0, 0.3); }
上面的代碼利用clip-path屬性,將圓形的路徑裁切到了元素的最終尺寸大小,并設置了其位置為x軸和y軸的50%。然后利用box-shadow屬性給圓形添加了一個較為柔和的陰影效果。
總的來說,CSS提供了很多種不同的方式可以實現圓形的效果,只需要根據需求選擇適合自己的方法即可。