圖解css3のborder-radius

早期製做圓角都是使用圖片來實現、經過用1px 的水平線條來堆疊出圓角或者利用JavaScript等等方法，可是都是須要增長多個無心義的標籤來實現，形成代碼亢餘。現在有了CSS3的圓角屬性——border-radius後，咱們沒必要會每種不一樣的圓角製做圖片而煩惱了，即減小了圖片的更新制做，減小了亢餘標籤，咱們能夠直接使用CSS3中的Border-radius來製做。

Border-radius圓角屬性

/* 四個方位角同時設定 */
border-radius:[<length>|<percentage>]{1,4}[/ [ <length> | <percentage> ]{1,4} ]?
/*分別設定*/
border-top-right-radius:[<length>|<percentage>][<length>|<percentage>]?
border-bottom-right-radius:[<length>|<percentage>][<length>|<percentage>]?
border-bottom-left-radius:[<length>|<percentage>][<length>|<percentage>]?
border-top-left-radius:[<length>|<percentage>][<length>|<percentage>]?

Border-radius基本語法：

取值：

<length>：用長度值設置對象的圓角半徑長度，單位能夠是em、ex、pt、px。不容許負值。

<percentage>：用百分比設置對象的圓角半徑長度。不容許負值。

瀏覽器支持狀況

截至文章發表，除了IE9如下不支持，firefox和chrome等現代瀏覽器最新版本都支持border-radius 。

編寫代碼時能夠直接寫border-radius，也能夠前加-webkit或者-moz前綴。注意若是border-radius單獨寫給Mozilla （火狐），Mozilla （火狐）寫法跟W3C標準寫法（webkit的實現方法與W3C同樣）有點不一樣，以下

• 上左：W3c的寫法：border-top-left-radius，Mozilla （火狐）的寫法： -moz-border-radius-topleft
• 上右：W3c的寫法：border-top-right-radius，Mozilla （火狐）的寫法： -moz-border-radius-topright
• 下右：W3c的寫法：border-bottom-right-radius，Mozilla （火狐）的寫法： -moz-border-radius-bottomright
• 下左：W3c的寫法：border-top-left-radius，Mozilla （火狐）的寫法： -moz-border-radius-bottomleft

.radius1 {
    border-radius:10px20px30px40px/40px30px20px10px;}/*這個等同於*/.radius2 {
    border-top-left-radius:10px40px;
    border-top-right-radius:20px30px;
    border-bottom-right-radius:30px20px;
    border-bottom-left-radius:40px10px;}

圓角可一塊兒寫在border-radius屬性，也能夠四個值分開寫

Border-radius詳解

border-radius方位簡寫方式

border-radius有四個值是按照top-left、top-right、 bottom-right、 bottom-left的順序來設置，border-radius簡寫方式以下

1. border-radius只有一個方位上的角度值時，四個角具備相同的圓角值
2. border-radius有兩個方位上的角度值時，top-left和bottom-right是第一個圓角值；top-right等於bottom-left是第一個圓角值。
3. border-radius有三個方位上的角度值時，此時top-left是第一個圓角值；top-right是第二個圓角值；bottom-right是第三個圓角值；bottom-left是第二個圓角值；
4. border-radius有四個方位上的角度值時，此時top-left是第一個圓角值；top-right是第二個圓角值；bottom-right是第三個圓角值；bottom-left是第四個圓角值；

border-radius簡寫實例代碼，以下：

/* 先設定 X 軸(水平)再設定 Y 軸(垂直) */.radius3 {
    border-radius:70px10px10px10px/70px10px10px10px;}

border-radius簡寫

水平、垂直半徑

border-radius圓角半徑有水平和垂直半徑之分，若是「/」先後的值都存在，那麼「/」前面的值設置其水平半徑，「/」後面值設置其垂直半徑。若是沒有「/」，則水平和垂直半徑相等。

而若是border-(top或bottom)-(left或right）-radius四個分開來寫，不是用「/」來表示水平、垂直半徑而是以空格分隔來表示。以下：

border-radius:10px20px30px100px/5px10px15px80px;/*「/」前面四個參數表明四角上的水平半徑，「/」後面四個參數表明四角上的垂直半徑 */
border-radius:10px/10px5px;/*水平半徑都爲10px，垂直兩兩對應10px和5px */
border-top-left-radius:10px30px;/*border-radius左上角單獨設定水平 垂直半徑 */

由於圓角有水平、垂直半徑之分，因此圓角不只可使圓角的，能夠是橢圓角的，

圓角曲線

水平/垂直半徑決定了該角落的曲線。下圖展現了可能出現不一樣絕對長度半徑的幾中狀況：

 

border-radius圓角曲線

border-radius圓角不容許相互重疊，因此當相鄰兩個角半徑之和大於所在矩形區域高/寬的大小時，曲線圓角將以一樣比例收縮全部相應半徑直到曲線彼此不重疊。這個比例以下：f = min(Li/Si)，i ∈ {top, right, bottom, left}，Ltop = Lbottom = 所在邊界框的寬，Lleft = Lright = 所在邊界框的高。若是f < 1，那麼全部角半徑都乘以f。能夠理解爲，當Li< Si時，圓角曲線半徑按f比例縮小。

border-radius圓角曲線絕對長度是一種表現形式，百分比也能夠表示。而百分比則是以邊界框爲標準。因此使用百分比圓角曲線大小受邊界框的寬、高影響。

如今咱們拿百分比來實驗相鄰圓角半徑之和Si大於Li。

首先咱們得清楚在50%狀況下，水平、垂直半徑各是多少，以下：

• box-sizing: content-box時：水平半徑50%等於width/2+padding+border；垂直半徑則等於height/2+padding+border。
• box-sizing: border-box時：水平半徑50%等於width/2；垂直半徑則等於height/2。

當水平、垂直都是50%時矩形則變成橢圓；若是是正方形則變成特殊的橢圓：圓。以下代碼：

.radius-content-box{
    width:40px;
    height:40px;
    border: solid 30px;
    padding:10px;
    border-color: orange orange silver silver;
    border-top-left-radius:50%;
    border-top-right-radius:60px;/*box-sizing是border-box時水平半徑50%等於width/2+padding+border（水平方向上的），垂直半徑等於height/2+padding+border*/
    border-bottom-right-radius:50%;
    border-bottom-left-radius:50%;/*box-sizing默認值是content-box;*/}.radius-border-box {
    width:90px;
    height:90px;
    padding:10px;
    border: solid 30px;
    border-color: orange orange silver silver;
    border-top-left-radius:50%;
    border-top-right-radius:45px;/*box-sizing是border-box時水平半徑50%就是width值（水平方向上的），垂直半徑等於heigh值*/
    border-bottom-right-radius:50%;
    border-bottom-left-radius:50%;
    box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;}

border-radius圓角曲線等於50%時

因此在半徑等於50%時，矩形就會變成橢圓，正方形變成圓形。若是大於50%，即半徑和大於相應邊界框的寬（高）時，則按照上面說的 f = min(Li/Si) f比例比例縮小半徑；若是一個矩形在相鄰同方向上的半徑都相等，則這個矩形都將變造成橢圓，若是是正方形則一直是圓形，以下代碼：

.radius5 {
    border-radius:50%;/*60%、100%、129%	都是圓形 */}

border-radius內、外半徑之分

內邊半徑等於外邊半徑減去對應邊border的寬度，既border-width影響圓角的內半徑。

因此當border-radius半徑小於等於border-width的寬度時，border-radius圓角無內角；當border-radius半徑大於border-width的寬度時，border-radius出現內角，看起來像一個圈。以下代碼：

.radius-boder-width{
    border:25px solid red;
    border-radius:15px25px45px65px;}

上例代碼則出現以下圖

你看我top上的內圈仍是直角的，囧~~~

border-radius內半徑受border-width影響

若是角的兩個相鄰邊框（border）有不一樣的寬度，那麼這個角將會從寬的邊平滑過分到窄的邊。其中一條邊甚至能夠是0。全部border-style（solid、dotted、inset等）跟著border-radius圓角的的曲線走。

這裏還得注意在條相鄰邊的border-style轉變的中心點是在一個和兩邊寬度成正比的角上。好比，兩條邊寬度相同，這個點就是一個45°的角上，若是一條邊是另一條邊的兩倍，那麼這個點就在一個30°的角上。界定這個轉變的線就是鏈接在內外曲線上的兩個點的直線。

.radius-border-width-style{
    border-color: red blue green yellow;
    border-style: solid;
    border-width:10px5px;
    border-radius:80px/40px;}

上例代碼則出現以下圖

border之間的分界線也受border-width的影響

border分界線

border-radius應用

注意點

1. border-radius不能直接做用於img元素，除firefox其餘瀏覽器貌似效果有點悲劇，border-radius將圖片內容都剪切了
2. 由於table的樣式屬性border-collapse是collapse時,因此border-radius圓角不能正常顯示,只有border-collapse: separate;時才能正常顯示。

持續更新 本頁全部DEMO

出自：http://www.html5jscss.com/css3-border-radius-55.html