前面系統(tǒng)總結(jié)了CSS3中Gradient和RGBA的用法，今天我們?cè)谝黄饋?lái)看看CSS3中制作圓角的屬性border-radius的具體用法。在CSS2中，大家都碰到過(guò)圓角的制作。當(dāng)時(shí)，對(duì)于圓角的制作，我們都需要使用多張圓角圖片做為背景，分別應(yīng)用到每個(gè)角上，我應(yīng)用最多的就是在需要圓角的元素標(biāo)簽中加四個(gè)空標(biāo)簽，然后在每個(gè)空標(biāo)簽中應(yīng)用一個(gè)圓角的背景位置，然后在對(duì)這幾個(gè)應(yīng)用了圓角的標(biāo)簽進(jìn)行定位到相應(yīng)的位置，具體實(shí)現(xiàn)過(guò)程我就不在多講，只看方法就知道煩死人。

如今CSS3中的border-radius出現(xiàn)后，讓我們沒(méi)有那么多的煩惱了，首先制作圓角圖片的時(shí)間是省了，而且其還有多個(gè)優(yōu)點(diǎn)：其一減少網(wǎng)站的維護(hù)的工作量，少了對(duì)圖片的更新制作，代碼的替換等等;其二、提高網(wǎng)站的性能，少了對(duì)圖片進(jìn)行http的請(qǐng)求，網(wǎng)頁(yè)的載入速度將變快；其三增加視覺(jué)美觀性。既然border-radius有這么多好處，我們就從他的語(yǔ)法，屬性和屬性值等方面來(lái)看其如何應(yīng)用，又是如何制作圓角，還有就是除了制作圓角他還能制作什么？有這么多，那我們就開(kāi)始吧：

一、語(yǔ)法：

二、取值：

<length>： 由浮點(diǎn)數(shù)字和單位標(biāo)識(shí)符組成的長(zhǎng)度值。不可為負(fù)值。

三、說(shuō)明：

border-radius是一種縮寫方法。如果“/”前后的值都存在，那么“/”前面的值設(shè)置其水平半徑，“/”后面值設(shè)置其垂直半徑。如果沒(méi)有“/”，則水平和垂直半徑相等。另外其四個(gè)值是按照top-left、top-right、bottom-right、bottom-left的順序來(lái)設(shè)置的其主要會(huì)有下面幾種情形出現(xiàn)：

1、border-radius: [ <length>{1,4} ]; //這里只有一個(gè)值，那么top-left、top-right、bottom-right、bottom-left四個(gè)值相等

2、border-radius:[ <length>{1,4} ]  [ <length>{1,4} ] ; //這里設(shè)置兩個(gè)值，那么top-left等于bottom-right，并且取第一個(gè)值；top-right等于bottom-left，并且取第二個(gè)值

3、border-radius:[ <length>{1,4} ]   [ <length>{1,4} ]   [ <length>{1,4} ];//如果有三個(gè)值，其中第一個(gè)值是設(shè)置top-left;而第二個(gè)值是top-right和bottom-left并且他們會(huì)相等,第三個(gè)值是設(shè)置bottom-right

4、border-radius:[ <length>{1,4} ]   [ <length>{1,4} ]  [ <length>{1,4} ]   [ <length>{1,4} ];//如果有四個(gè)值，其中第一個(gè)值是設(shè)置top-left;而第二個(gè)值是top-right,第三個(gè)值bottom-right,第四個(gè)值是設(shè)置bottom-left

前面，我們主要看了border-radius的縮寫格式，其實(shí)border-radius和border屬性一樣，還可以把各個(gè)角單獨(dú)拆分出來(lái)，也就是以下四種寫法，這里我規(guī)納一點(diǎn)，他們都是先Y軸在X軸，具體看下面：

這里說(shuō)一下，各角拆分出來(lái)取值方式：<length> <length>中第一個(gè)值是圓角水平半徑，第二個(gè)值是垂直半徑,如果第二個(gè)值省略，那么其等于第一個(gè)值，這時(shí)這個(gè)角就是一個(gè)四分之一的圓角，如果任意一個(gè)值為0，那么這個(gè)角就不是圓角。

border-radius只有在以下版本的瀏覽器：Firefox4.0+、Safari5.0+、Google Chrome 10.0+、Opera 10.5+、IE9+支持border-radius標(biāo)準(zhǔn)語(yǔ)法格式，對(duì)于老版的瀏覽器，border-radius需要根據(jù)不同的瀏覽器內(nèi)核添加不同的前綴，比說(shuō)Mozilla內(nèi)核需要加上“-moz”，而Webkit內(nèi)核需要加上“-webkit”等，那么我為了能兼容各大內(nèi)核的老版瀏覽器，我們看看border-radius在不同內(nèi)核瀏覽器下的書(shū)寫格式：

1、Mozilla(Firefox, Flock等瀏覽器)

2、WebKit (Safari, Chrome等瀏覽器)


3、Opera瀏覽器：


4、Trident (IE)

IE<9不支持border-radius;IE9下沒(méi)有私有格式，都是用border-radius，其寫法和Opera是一樣的，這里就不在重復(fù)。

為了不管是新版還是老版的各種內(nèi)核瀏覽器都能支持border-radius屬性，那么我們?cè)诰唧w應(yīng)用中時(shí)需要把我們的border-radius格式改成：

其拆分開(kāi)來(lái)的格式相應(yīng)需要加上-moz和-webkit，上面的代碼其實(shí)就等價(jià)于下面的代碼：

另外需要特別注意的是，border-radius一定要放置在-moz-border-radius和-webkit-border-radius后面，（特別聲明：本文中所講實(shí)例都只寫了標(biāo)準(zhǔn)語(yǔ)法格式，如果你的版本不是上面所提到的幾個(gè)版本，如要正常顯示效果，請(qǐng)更新瀏覽器版本，或者在border-radius前面加上相應(yīng)的內(nèi)核前綴，在實(shí)際應(yīng)用中最好加上各種版本內(nèi)核瀏覽器前綴。）

我們初步來(lái)看一個(gè)實(shí)例：

HTML代碼：

為了更好的看出效果，我們給這個(gè)demo添加一點(diǎn)樣式：


注：如無(wú)特殊聲明，本文實(shí)例所有基本代碼格式如上所示，只在該元素上添加border-radius屬性設(shè)置。


這種寫法我們前面有提到過(guò)，“/”前是指圓角的水平半徑，而“/”后是指圓角的垂直半徑，他們兩都遵循TRBL的順序原則。為了能讓大家更清楚理解，我們把上面代碼換成如下：


不仿看看他們的效果：

三、支持的瀏覽器：

上面我們介紹了border-radius的基本用法，以及在各大瀏覽器下的格式等，下面我們通過(guò)實(shí)例來(lái)介紹其具體的用法：

一：border-radius只有一個(gè)取值時(shí)，四個(gè)角具有相同的圓角設(shè)置，其效果是一致的：

效果：

二：border-radius設(shè)置兩個(gè)值，此時(shí)top-left等于bottom-right并且他們?nèi)〉谝粋€(gè)值；top-right等于bottom-left并且他們?nèi)〉诙€(gè)值，也就是說(shuō)元素 左上角和右下角相同，右上角和左下角相同

效果：

三：border-radius設(shè)置三個(gè)值，此時(shí)top-left取第一個(gè)值，top-right等于bottom-left并且他們?nèi)〉诙€(gè)值，bottom-right取第三個(gè)值

效果：

四：border-radius設(shè)置四個(gè)值，此時(shí)top-left取第一個(gè)值，top-right取第二個(gè)值，bottom-right取第三個(gè)值.bottom-left取第四個(gè)值

效果：

從上面四個(gè)實(shí)例中我們可以看出border-radius和border取值非常相似，我們border遵循TRBL原則（從上邊右邊下邊左邊分別對(duì)應(yīng)1、2，3，4四個(gè)值），只不過(guò)border-radius換成了左上角(top-left)對(duì)就值1，右上角（top-right）對(duì)應(yīng)值2，右下角(bottom-right)對(duì)應(yīng)值3，左下角(bottom-left)對(duì)應(yīng)值4.

上面四個(gè)實(shí)例都是水平和垂直半徑相等情況下border-radius的應(yīng)用，下面我們來(lái)看幾個(gè)水平和垂直半徑值不一樣的實(shí)例：

一、border-radius: 水平 / 垂直：只設(shè)置一個(gè)水平和一個(gè)垂直半徑時(shí)，那么水平半徑分別指定了元素個(gè)四個(gè)角的水平半徑值，同樣垂直半徑指定了元素的垂直半徑值，此時(shí)四個(gè)角具有相同的效果，因?yàn)樗麄兙哂邢嗤闹?br />

效果：

此時(shí)我們每個(gè)角不在是四分之一圓了，前面我們也說(shuō)過(guò)，只有水平和垂直半徑值相同時(shí)，他們才具有四分之一圓特性，這樣一來(lái)，我們可以改變不同的半徑值，制作一些特殊的圖形效果，感興趣的朋友可以自己在本地嘗試一下各種不同的設(shè)置方式。

二、border-radius: 水平1 水平2 / 垂直1  垂直2：設(shè)置了兩個(gè)水平值和兩個(gè)垂直值，此時(shí)我們top-left和bottom-right具有相同的水平和垂直半徑，也就是其中的水平1和垂直1；而top-right和bottom-left也具有相同的水平和垂直半徑值，也就是水平2和垂直2，我們他拆分出來(lái)就是：

具體我們來(lái)看下面的實(shí)例：


效果：

上面兩種都是相互對(duì)應(yīng)的取值，我們來(lái)看一個(gè)實(shí)例，水平有三個(gè)取值，而 垂直只有兩個(gè)取值

效果：

我們從上面等價(jià)代碼中可以知道，不管他們?cè)趺慈≈担?ldquo;/”前后各自按TRBL順序取值。

上面幾種都是我們常見(jiàn)的一些應(yīng)用，那下面我們來(lái)看幾種特殊點(diǎn)的應(yīng)用：

一、對(duì)于border-radius還有一個(gè)內(nèi)半徑和外半徑的區(qū)別，它主要是元素 邊框值較大時(shí)，效果就很明顯，當(dāng)我們border-radius半徑值小于或等于border的厚度時(shí)，我們邊框內(nèi)部就不具有圓角效果,例如下面的實(shí)例

效果：

我們接著上面這個(gè)例子，把 border-radius半徑值改成比邊框值大一點(diǎn)：

效果：

為何當(dāng)border-radius的半徑小于元素邊框的厚度時(shí)，內(nèi)部沒(méi)有圓角效果？我在這里說(shuō)一下，因?yàn)槲覀兊腷order-radius的內(nèi)徑值是等于外徑值減去邊框厚度值，當(dāng)他們的值為負(fù)時(shí)，內(nèi)徑默認(rèn)為0,最前面講border-radius取值時(shí)就說(shuō)過(guò)其值不能為負(fù)值。同時(shí)也說(shuō)明border-radius的內(nèi)外曲線的圓心并不一定是一致的。只有當(dāng)邊框厚度為0時(shí)，我們內(nèi)外曲線的圓心才會(huì)在同一位置。

二、如果角的兩個(gè)相鄰邊有不同的寬度，那么這個(gè)角將會(huì)從寬的邊平滑過(guò)度到窄的邊。其中一條邊甚至可以是0。相鄰轉(zhuǎn)角是由大向小轉(zhuǎn)。

效果：

三、相鄰兩條邊顏色和線條樣式不同時(shí)，那么兩條相鄰邊顏色和樣式轉(zhuǎn)變的中心點(diǎn)是在一個(gè)和兩邊寬度成正比的角上。比如，兩條邊寬度相同，這個(gè)點(diǎn)就是一個(gè)45°的角上，如果一條邊是另外一條邊的兩倍，那么這個(gè)點(diǎn)就在一個(gè)30°的角上。界定這個(gè)轉(zhuǎn)變的線就是連接在內(nèi)外曲線上的兩個(gè)點(diǎn)的直線。我們來(lái)看一個(gè)四邊顏色不一樣，寬度不一樣的實(shí)例：

效果：

上面這幾種是比較特殊點(diǎn)的用法，如果大家還想通過(guò)border-radius制作更多不同形狀，或者更多的應(yīng)用，可以點(diǎn)擊這里。

border-radius能應(yīng)用在各種元素中，但在img和table應(yīng)用時(shí)會(huì)有點(diǎn)差別的，首先先來(lái)看圖片上應(yīng)用border-radius時(shí)的情況。在img上應(yīng)用border-radius到目前只有Firefox4.0+瀏覽器才正常，而在其他瀏覽器都不能對(duì)圖片進(jìn)行剪切，我們先來(lái)看一個(gè)實(shí)例：

我們來(lái)看其在各瀏覽器下的效果：

左圖是在Safari5.0、Google Chrome 10.0、Opera11.1下的效果，我們可以看得出，圖片根本就沒(méi)有圓角效果，右圖是在Firefox4.0下的效果，低于這個(gè)版本的和左圖一樣效果，如果需要達(dá)成一致效果，大家就必須放棄border-radius而采用CSS2制作圓角的老辦法。另外table的樣式屬性border-collapse是collapse時(shí),border-radius不能正常顯示,只有border-collapse: separate;時(shí)才能正常顯示。

效果：

那么到此，我們border-radius的一些用法就介紹完了。希望能給大家?guī)?lái)一點(diǎn)幫助，感興趣的朋友可以觀注本站后面的內(nèi)容，我們下節(jié)將介紹CSS3中的文字陰影：text-shadow的用法。更希望感興趣的朋友一起探討和學(xué)習(xí)CSS3更多的技術(shù)知識(shí)。 

最新評(píng)論