.round { border-radius: 5px; /* 所有角都使用半徑為5px的圓角,此屬性為CSS3標(biāo)準(zhǔn)屬性 / -moz-border-radius: 5px; / Mozilla瀏覽器的私有屬性 / -webkit-border-radius: 5px; / Webkit瀏覽器的私有屬性 / border-radius: 5px 4px 3px 2px; / 四個半徑值分別是左上角、右上角简识、右下角和左下角 */}
關(guān)于在IE里怎么實(shí)現(xiàn)圓角舟误,可以看《Excellent Article Which Included Ways to Achieve Rounded Corners in IE》這篇文章野哭。
1.用border-radius畫圓
實(shí)心圓
如圖彤钟,是用border-radius屬性畫出來的一個完美的實(shí)心圓斑胜。畫實(shí)心圓的方法是高度和寬度相等鞠抑,并且把border的寬度設(shè)為高度和寬度的一半饭聚。代碼如下。
123456
circle { width: 200px; height: 200px; background-color: #a72525; -webkit-border-radius: 100px;}
空心圓
通過border-radius屬性畫空心圓和畫實(shí)心圓的方法差不多搁拙,只是border的寬度只能小于高度和寬度的一半秒梳。代碼如下。
1234567
circle { width: 200px; height: 200px; background-color: #efefef; /* Can be set to transparent */ border: 3px #a72525 solid; -webkit-border-radius: 100px;}
虛線圓
1234567
circle { width: 200px; height: 200px; background-color: #efefef; /* Can be set to transparent */ border: 3px #a72525 dashed; -webkit-border-radius: 100px 100px 100px 100px;}
2.半圓和四分之一圓
樹半圓
以本例來講箕速,半圓的畫法是把寬度設(shè)為高度的一半酪碘,并且也只設(shè)置左上角和左下角的半徑。代碼如下盐茎。
quartercircle { width: 200px; height: 200px; background-color: #a72525; -webkit-border-radius: 200px 0 0 0;}
橫半圓
quartercircle {width: 200px;height: 100px;background-color: #a72525;-webkit-border-radius: 0 0 100px 100px;}
四分之一圓
四分之一圓的實(shí)現(xiàn)方法是把高度和寬度設(shè)置為相等兴垦,只設(shè)置一個圓角,其半徑等于高度或?qū)挾茸帜1纠a如下探越。
123456
quartercircle { width: 200px; height: 200px; background-color: #a72525; -webkit-border-radius: 200px 0 0 0;}
本文轉(zhuǎn)載自http://www.xincss.com/?p=221