當前位置:首頁 > 建站常識 > 列表

CSS+DIV border-radius 圓角圓邊效果

點擊:時(shí)間:2017/1/7關鍵詞:css圓角 實心圓 空心圓 虛線圓
border-radius:用(yòng)這(zhè)個(gè)屬性能實現圓角邊框的(de)效果。現在隻有Mozilla/Firefox 和(hé) Safari 3支持該屬性-webkit-border-radius:蘋果;谷歌(gē),等一些浏覽器認,因爲他(tā)們都用(yòng)的(de)是webkit内核;-moz-border

css圓角

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; }

預約建站
免費提供網站優化(huà)
領取關鍵詞