css3圓角和圓角邊框使用方法總結

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

可以先學習《快速玩轉CSS3教程》中的 CSS3圓角介紹 章節課程

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

1. 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%。

2. CSS3圓角邊框和邊界圖片效果執行個體分享

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

3. 分享一篇CSS3圓角和漸層功能的執行個體代碼

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

4. CSS3圓角邊框的使用-遁地龍捲風

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

5. CSS3圓角,陰影,透明

CSS3實現圓角有兩種方法.

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

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

6. css3圓角邊框製作方法

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. css3圓角border-radius製作尖角。

2. 瀏覽器 css3圓角問題

3. css3圓角矩形問題

【相關推薦】

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

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