Css3圓角邊框制作代碼
發(fā)布時(shí)間：2015-11-18 17:00:17 作者：佚名 
我要評(píng)論
我要評(píng)論本篇文章給大家介紹基于css3來(lái)實(shí)現(xiàn)邊框圓角效果，實(shí)現(xiàn)此效果當(dāng)然border-radius要在firefox或Safari 和 Chrome才能實(shí)現(xiàn)哦。對(duì)css3圓角邊框制作代碼感興趣的朋友參考下吧
經(jīng)?？吹絼e人的網(wǎng)站有個(gè)邊框來(lái)修飾文字區(qū)域，類似圓角矩形把文字環(huán)繞起來(lái)，特別有感覺(jué)，于是就試著用圖片邊框來(lái)修飾，但是用圖片過(guò)多會(huì)拉慢網(wǎng)頁(yè)的加載速度，能不能使用css3來(lái)實(shí)現(xiàn)邊框圓角效果呢？當(dāng)然border-radius要在firefox或Safari 和 Chrome才能實(shí)現(xiàn)
W3C 很早就制訂了實(shí)現(xiàn)了 CSS 圓角的 CSS3 屬性：border-radius，F(xiàn)irefox 和 Safari 也通過(guò)私有屬性實(shí)現(xiàn)了該功能：
復(fù)制代碼
代碼如下:<div style=" border-top-left-radius: 55px 25px; border-bottom-left-radius: 55px 25px; border-top-right-radius: 55px 25px; border-bottom-right-radius: 55px 25px; border: 1px solid #000; padding: 10px;">Firefox 和 Safari 實(shí)現(xiàn)圓角</div>
Firefox 和 Safari 使用私有屬性實(shí)現(xiàn)圓角效果;
這個(gè)表示邊框內(nèi)的底部圖片顏色;
border: 1px solid #000;表示邊框的寬度，實(shí)心的，顏色是黑色的；
border-top-left-radius: 55px 25px;表示左上角的邊框圓角效果，通過(guò)英文就可以識(shí)別:top,left，修飾圓角的長(zhǎng)度通過(guò)控制像素值來(lái)實(shí)現(xiàn)，55px表示橫向的長(zhǎng)度，25px表示縱向的長(zhǎng)度；
同理，border-bottom-right-radius: 55px 25px;右下角的圓角效果只要修改top為bottom就可以了;
使用css3來(lái)實(shí)現(xiàn)邊框圓角效果
其中 -moz-border-radius 是 Firefox 實(shí)現(xiàn)圓角的私有屬性，而 -webkit-border-radius 是 webkit 內(nèi)核瀏覽器（如 Safari 和 Chrome）實(shí)現(xiàn)圓角的私有屬性，如果你只要指定某一個(gè)角是圓角的話，它們都分別定義了四個(gè)屬性：
復(fù)制代碼
代碼如下:-moz-border-radius-topleft / -webkit-border-top-left-radius
-moz-border-radius-topright / -webkit-border-top-right-radius
-moz-border-radius-bottomleft / -webkit-border-bottom-left-radius
-moz-border-radius-bottomright / -webkit-border-bottom-right-radius
相關(guān)文章
- 這篇文章主要教大家CSS3制作圓角圖片和橢圓形圖片的具體實(shí)現(xiàn)代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-07-08
- 這篇文章主要介紹了CSS的一些圓角圖形實(shí)例分享,包括帶有3D效果的CSS圓角實(shí)現(xiàn),需要的朋友可以參考下2015-09-28
- 這篇文章主要介紹了CSS3繪制圓角矩形的簡(jiǎn)單示例,注意一下各瀏覽器對(duì)CSS3的兼容性,需要的朋友可以參考下2015-09-28
- 這篇文章主要介紹了使用css實(shí)現(xiàn)圓角圖形繪制,文中也提到了相關(guān)的鋸齒問(wèn)題,需要的朋友可以參考下2015-07-22
- 這篇文章主要為大家介紹了純CSS實(shí)現(xiàn)圓角折疊菜單的方法,通過(guò)多個(gè)寬度漸進(jìn)變化的頁(yè)面元素堆加模擬圓角效果,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-05-19
這篇文章主要介紹了CSS實(shí)現(xiàn)反方向圓角的示例代碼的相關(guān)資料，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-10-12
