border-radius:用(yòng)這(zhè)個(gè)屬性能實現圓角邊框的(de)效果。現在隻有Mozilla/Firefox 和(hé) Safari 3支持該屬性
-webkit-border-radius:蘋果;谷歌(gē),等一些浏覽器認,因爲他(tā)們都用(yòng)的(de)是webkit内核;
-moz-border-radius:moz這(zhè)個(gè)屬性 主要是專門支持Mozilla Firefox 火狐浏覽器的(de)CSS屬性。
在這(zhè)兩個(gè)屬性有值的(de)時(shí)候,去掉哪個(gè)屬性,對(duì)用(yòng)他(tā)們做(zuò)内核的(de)浏覽器就有影(yǐng)響,如果沒值的(de)話(huà),就沒影(yǐng)響,這(zhè)兩個(gè)屬性和(hé),IE,和(hé)360沒關系。不删除的(de)話(huà)影(yǐng)響微乎其微
border-radius:上海網站制作的(de)官網 021jz.com.cn就是用(yòng)這(zhè)個(gè)屬性能實現圓角邊框的(de)效果。
現在隻有Mozilla/Firefox 和(hé) Safari 3支持該屬性。
.round {-moz-border-radius:5px;-webkit-border-radius:5px; border-radius:5px; border:1px solid #000;}
CSS3中border-radius隐藏的(de)威力
這(zhè)篇文章(zhāng)将簡述使用(yòng)CSS3的(de)border-radius來(lái)畫(huà)圓、半圓和(hé)四分(fēn)之一圓,并如何利用(yòng)它們。
如何使用(yòng)border-radius屬性
下(xià)面是border-radius屬性最基本的(de)使用(yòng)方法。
.round {border-radius: 5px; /* 所有角都使用(yòng)半徑爲5px的(de)圓角,此屬性爲CSS3标準屬性 */-moz-border-radius: 5px; /* Mozilla浏覽器的(de)私有屬性 */-webkit-border-radius: 5px; /* Webkit浏覽器的(de)私有屬性 */border-radius: 5px 4px 3px 2px; /* 四個(gè)半徑值分(fēn)别是左上角、右上角、右下(xià)角和(hé)左下(xià)角 */}
實心圓
用(yòng)border-radius屬性畫(huà)出來(lái)的(de)一個(gè)完美(měi)的(de)實心圓。畫(huà)實心圓的(de)方法是高(gāo)度和(hé)寬度相等,并且把border的(de)寬度設爲高(gāo)度和(hé)寬度的(de)一半。
#circle {width: 200px; height: 200px; background-color: #a72525; -webkit-border-radius: 100px; }
空心圓
通(tōng)過border-radius屬性畫(huà)空心圓和(hé)畫(huà)實心圓的(de)方法差不多(duō),隻是border的(de)寬度隻能小于高(gāo)度和(hé)寬度的(de)一半。代碼如下(xià)。
#circle {width: 200px; height: 200px; background-color: #efefef; border: 3px #a72525 solid; -webkit-border-radius: 100px; }
虛線圓
#circle { width: 200px; height: 200px; background-color: #efefef; border: 3px #a72525 dashed; -webkit-border-radius: 100px 100px 100px 100px; }