CSS中設置圓形的方法有很多種,下面分別介紹這些方法:
/* 1. 使用border-radius屬性 */ .circle { width: 100px; height: 100px; border-radius: 50%; } /* 2. 使用垂直和水平方向的border-radius屬性 */ .circle { width: 100px; height: 100px; border-top-left-radius: 50%; border-top-right-radius: 50%; border-bottom-left-radius: 50%; border-bottom-right-radius: 50%; } /* 3. 使用background的border-radius屬性 */ .circle { width: 100px; height: 100px; background: #f00; border-radius: 50%; -webkit-background-clip: padding-box; background-clip: padding-box; }
上述方法中,第一種方法是最簡單直接的方式,即使用border-radius屬性設置圓形,其中border-radius的值為50%,即圓形的半徑為寬度或高度的一半。
第二種方法則是使用四個不同的border-radius屬性,分別設置垂直和水平方向的圓角半徑,這樣可以在保持圓形的前提下,制作出不同大小的橢圓。
第三種方法是使用background的border-radius屬性,這樣可以制作出有背景色的圓形,并用background-clip屬性控制背景色不溢出圓形的邊界,讓圓形看起來更完美。
上一篇css怎樣設置刪除線
下一篇css怎樣設置圓邊