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最新基礎教學詳解

#

以上是css3圓角和圓角邊框使用方法總結的詳細內容。更多資訊請關注PHP中文網其他相關文章！