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