原文 Border-radius: create rounded corners with CSS!

CSS3的圓角參數讓網頁開發者能輕鬆的使用圓角設計,不需要使用圖片或是大量的DIV標記,這大概是CSS3裡最令人印象深刻的功能了。


自從2005年發佈的圓角屬性終於被多數瀏覽器支援(雖然支援度不一) ,因為相對容易使用,因此這個新技術很快的被網頁開發者接受。


下例是個基本的使用方式:

這個區塊在FF, Safari/Chrome, Opera, IE9裡看起來應該是圓角
(真實效果請連回原文)

CSS碼如下,理論上十分的單純
#example1 {
border-radius: 15px;
}

不幸的是,現在你可能還是要特別為FireFox加上-moz-來修正(FF3.6之後已修正)
#example1 {
-moz-border-radius: 15px;
border-radius: 15px;.
}

= **怎麼用** ====

圓角可以各自分開使用在四個不同的角落,利用圓角屬性(border-bottom-left-radius, border-top-left-radius),或是直接用border-radius的縮寫標示來指定四個角。

我們先介紹各別圓角的語法,再來看border-radius 怎麼縮寫
四個角的語法(邊框-下-左-圓角...)
**border-bottom-left-radius, border-bottom-right-radius, border-top-left-radius, border-top-right-radius**

每個圓角屬性都能指定一個或兩個參數,寫成 px 或是 % 都可以(%數是邊框和整體的比率)

= **語法**====

border-*略*-radius: [ <length> | <%> ] [<length> | <%> ]?


= **範例**====
border-top-left-radius: 10px 5px;
border-bottom-right-radius: 10% 5%;
border-top-right-radius: 10px;

兩個數字依次序指定水平和垂直的距離,也就是邊框內部到外緣的距離,由這兩個數字就能決定圓角的曲度。

下圖範例演示不同的圓角設定
如果你把數字設成0,那角就會變成直角而不是圓的。

= **border-radius**====
邊框圓角border-radius的縮寫法可以一次指定四個角。可輸入一或兩組的參數,每組有四個數字可用 px 或 % 來表示。

= **語法**====

[ <length> | <percentage> ]{1,4} [ / [ <length> | <percentage> ]{1,4} ]?


= **範例**====
border-radius: 5px 10px 5px 10px / 10px 5px 10px 5px;
border-radius: 5px;
border-radius: 5px 10px / 10px;

前組(1或4個)參數是用來指定四個角的水平曲度,後組用 / 分開之後的參數是用來指定垂直。如果只寫一組數字表示水平、垂直的參數一樣。

每組都要遵守下例規則

如果設定了4個參數,依序是,左上, 右上, 右下, 左下(自左上順時針),如果只設定2個參數,左下沒寫表示和右上一樣,右下沒寫就同左上,如果只有一個參數,就是所有的角都一樣。

= **瀏覽器支援**====
原文時間點,Opera10.5, Sfari5,Chrome5, 都在W3C原則下支援個別的四個圓角設定及border-radius縮寫,(雖然多少都還有些BUG像是邊框樣式、px及%的差異等等)

Firefox1.0要加上 -moz- 來修正,而且有點地方的設定和W3C有些不一致。
更新: Firefox nightly版不需要-moz-也支援。

Safari及Chrome(及其他以webkit為核心的瀏覽器)從3.0開始都支援-webkit-修正過後的 border-radius(5以後的版本就能去掉-webkit-),雖然也是多少有一些差異(舊版本對border-radius的支援情況,詳見本文http://www.css3.info/border-radius-apple-vs-mozilla/)

就連微軟也承諾,決心要讓IE9之後的更新開始支援border-radius

= ** -moz- 修正**====

Mozilla的Firefox 自1.0就開始支援加註 -moz-的圓角,不過到了3.5版才開始支援橢圓,也就是開始支援使用2個參數來設定水平及垂直的距離。3.5之前的版本只支援單一參數,所以每個邊都是正圓弧。

語法上,自FF3.5就開始遵循W3C的原則,除了寫法要加-moz-而有些不同,詳下:

**W3C**              **Mozilla**
border-radius            -moz-border-radius
border-top-left-radius       -moz-border-radius-topleft
border-top-right-radius       -moz-border-radius-topright
border-bottom-right-radius     -moz-border-radius-bottomright
border-bottom-left-radius      -moz-border-radius-bottomleft

另外在用百分比的情況下,呈現上也有點不同,詳見Mozilla研發中心

= **跨瀏覽器範例** ====
這個例子展示各種瀏覽器(FF, Safari/Chrome, Opera甚致IE9)最新版本中,圓角的呈現狀況:

A
B
C
D
E
F

 

#Example_A {
height: 65px;
width:160px;
-moz-border-radius-bottomright: 50px;
border-bottom-right-radius: 50px;
}
#Example_B {
height: 65px;
width:160px;
-moz-border-radius-bottomright: 50px 25px;
border-bottom-right-radius: 50px 25px;
}

#Example_C {
height: 65px;
width:160px;
-moz-border-radius-bottomright: 25px 50px;
border-bottom-right-radius: 25px 50px;
}

#Example_D {
height: 5em;
width: 12em;
-moz-border-radius: 1em 4em 1em 4em;
border-radius: 1em 4em 1em 4em;
}

#Example_E {
height: 65px;
width:160px;
-moz-border-radius: 25px 10px / 10px 25px;
border-radius: 25px 10px / 10px 25px;
}

#Example_F {
height: 70px;
width: 70px;
-moz-border-radius: 35px;
border-radius: 35px;
}

= **小提醒及延伸閱讀** ===

在W3C討論背景及邊框定義的頁面裡對圓角參數有更詳細的說明  特別針對具有不同寛度的邊框,還有加上圓角後的背景圖片,顏色及樣式的變化,如果table和 border-radius有交集時會如何呈現。

以下是這些問題的說明及定義

4.4.1 邊角陰影 
4.4.2 邊角內縮 
4.4.3 顏色及樣式變化
4.4.5 在table上的效果

 

, ,

CHIBC-暗月之鏡 發表在 痞客邦 PIXNET 留言(2) 人氣()


留言列表 (2)

發表留言
  • Eric Hsu
  • 本文標題有錯字……
  • 真的.. 謝啦

    CHIBC-暗月之鏡 於 2011/12/29 09:26 回覆

  • M
  • 謝謝你的這篇教學!

    冒味不知是否可請教你, 怎麼各別定義Firefox/IE/Google Chrome
    我想修改的是margin-left的數值,
    目前已解決的是
    margin-left: 40px;/*Firefox*/
    margin-left:160px \9; /*IE8*/
    *margin-left:160px; /*IE7 */
    _margin-left:160px;; /*IE6 */

    但還需要修改在Google Chrome時的數值,但是不知道要用什麼定義,

    非常希望能得到你的指導!
    不好意思!麻煩你!謝謝!!!