CSS3引入了許多新的屬性,其中包括了通過簡單的代碼實(shí)現(xiàn)圓角的功能。使用CSS3的圓角屬性可以對盒子的四個角設(shè)置不同大小的圓弧,讓元素的邊角更加柔和和美觀。
border-radius:20px;
通過以上代碼設(shè)置一個20px的圓角樣式,這指的是四個角都會被設(shè)置成20px的圓弧。我們同樣可以選擇只對某個特定的角進(jìn)行圓角設(shè)置,例如只對左上角和右下角進(jìn)行圓角設(shè)置可以這樣寫:
border-top-left-radius:20px; border-bottom-right-radius:20px;
另外,CSS3還支持通過單獨(dú)設(shè)置水平和垂直方向的半徑來實(shí)現(xiàn)橢圓的效果。
border-radius:20px/50px;
上述代碼將會將水平方向設(shè)置為20px的圓弧,垂直方向設(shè)置為50px的圓弧,因此我們可以通過這種方式很容易地實(shí)現(xiàn)橢圓形。
總之,CSS3的圓角屬性為我們制作圓弧元素提供了非常靈活和方便的方式,我們只需要使用簡單的代碼便可以實(shí)現(xiàn)不同大小和形狀的圓弧效果。
上一篇css ios適配
下一篇css isdisp