在CSS3出現之前，想要實現圓角的效果可以通過圖片或者用margin屬性實現，傳統的圓角生成方案，需要多張圖片作為背景圖案。CSS3出現以后，就不需要浪費時間去制作多張圖片了，大大的減少了工作量，提高了網頁的性能，提升頁面加載速度，并且增加了視覺的可靠性。既然說了CSS3中的圓角有這么多的優勢，那么我們就來總結下css3圓角和圓角邊框使用方法。

CSS3圓角及圓角邊框使用相關知識

自適應橢圓與圓角構造，在css上構造圓形只需要將border-radius屬性值設為邊長的一半即可。這里我們全面介紹一下border-radius的屬性，border-radius是一個簡寫屬性，它的展開式是border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius。它還有一個鮮為人知的特性：border-radius可以單獨指定水平和垂直半徑，只要用一個斜杠( / )分隔這兩個值即可(圓形圓角水平和垂直半徑相等，可以合并)。結合這這些特性來看的話，border-radius:50%;的詳細展開應該是border-radius:50% 50% 50% 50%/50% 50% 50% 50%。

學習要點如下：圓角 border-radius；盒陰影 box-shadow；邊界圖片 border-image。border-radius 屬性允許您為元素添加圓角邊框！border-image 屬性用于設置圖片的邊框。

線性漸變：background:linear-gradient(設置漸變形式,第一個顏色起點,中間顏色點 中間顏色的位置,結束點顏色); Linear:漸變的類型(線性漸變)； 漸變的形式：可選參數 有兩種方式-1、設置旋轉角度，0度代表水平從左到右，90度就是從上到下啦，從0度開始逆時針變換。

border-radius詳解

border-radius:50px; 上右下左，水平和垂直距離都是50px

border-radius:50%; 這里的%號是已應用該css樣式元素的長度和寬度為基數的

border-radius:50% 30% ; 上下，水平垂直是50% 左右，水平垂直是30%

border-radius:50% 30% 10%; 上,水平垂直是50%，左右，水平垂直是30%，下，水平垂直是10%

border-radius:10% 50% 30% 10%; 上，水平垂直都是10%。右，平垂直都是50%。下，水平垂直都是30%。左，水平垂直都是10%/前面是水平的,/后面是垂直的

border-radius:50% / 30% ; 上左下右,水平是50%，垂直是30%

border-radius:50% / 30% 10%; 上右下左，水平都是50%，上下垂直30%，左右垂直10%;

CSS3實現圓角有兩種方法.

第一種是背景圖像,傳統的CSS每個元素只能有一個背景圖像,但是CSS3可以允許一個元素有多個背景圖像.這樣給一個元素添加4個1/4圓的背景圖像,分別位于4個角上就可以實現圓角了.

第二種方法就簡潔了,直接用CSS實現,不需要用圖片.

Firefox 和 Safari 使用私有屬性實現圓角效果; 這個表示邊框內的底部圖片顏色; border: 1px solid #000;表示邊框的寬度，實心的，顏色是黑色的； border-top-left-radius: 55px 25px;表示左上角的邊框圓角效果，通過英文就可以識別:top,left，修飾圓角的長度通過控制像素值來實現，55px表示橫向的長度，25px表示縱向的長度； 同理，border-bottom-right-radius: 55px 25px;右下角的圓角效果只要修改top為bottom就可以了; 使用css3來實現邊框圓角效果。

相關問答

【相關推薦】

1. php中文網免費視頻教程：CSS3 最新視頻教程

2. php中文網免費教程：CSS3最新基礎教程詳解

總結

以上是生活随笔為你收集整理的php边框圆角,css3圆角和圆角边框使用方法总结的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。