CSS中如何設置不規則圓呢?其實,使用border-radius屬性可以設置圓角,但只能設置比較規則的圓形。如果需要設置不規則圓,則需要借助CSS3的clip-path屬性。
.clip-circle{ -webkit-clip-path: circle(50% at 50% 50%); clip-path: circle(50% at 50% 50%); }
上面的代碼使用circle()函數將圓形定義為一個圓,參數中的50%表示半徑,at表示圓心的位置,50% 50%則表示圓心在容器的中心位置。將該屬性應用到一個div元素上,該元素就可以顯示成一個完美的圓形。
如果要設置不規則圓,則需要改變clip-path屬性的參數。比如,下面的代碼可以將圓形設置為一個橢圓形:
.ellipse { -webkit-clip-path: ellipse(70% 90% at 50% 50%); clip-path: ellipse(70% 90% at 50% 50%); }
在使用clip-path屬性時,需要注意一些兼容性問題,可以使用-webkit-clip-path屬性來兼容一些舊版本的瀏覽器。
除了使用circle()和ellipse()函數,clip-path屬性還可以使用其他的函數來定義不規則形狀,比如polygon()函數。這個函數可以定義任意多邊形,只需要提供多邊形的各個點坐標即可。
.polygon { -webkit-clip-path: polygon(0% 0%, 100% 50%, 0% 100%); clip-path: polygon(0% 0%, 100% 50%, 0% 100%); }
上面的代碼定義了一個三角形形狀,只需要提供三個點的坐標即可。
總之,使用clip-path屬性可以輕松地定義不規則形狀,包括不規則圓形。只需要熟練使用相關的函數,就可以實現更加復雜的形狀。
上一篇css怎么設置上邊距