《CSS3 入門教程系列》前一篇文章詳細介紹了 CSS3?RGBA?特性的用法，今天這篇文章我們在一起來看看?CSS3?中用于實現圓角效果的?border-radius?屬性的具體用法。

　　以前制作圓角效果，我們都需要使用多張圓角圖片做為背景分別應用到每個角上，我應用最多的就是在需要圓角的元素標簽中加四個空標簽，然后在每個空標簽中應用一個圓角的背景位置，然后在對這幾個應用了圓角的標簽進行定位到相應的位置，非常繁瑣。

您可能感興趣的相關文章

• Web 開發(fā)人員和設計師必讀文章推薦
• 20個非常絢麗的 CSS3 特性應用演示
• 35個讓人驚訝的 CSS3 動畫效果演示
• 推薦12個漂亮的 CSS3 按鈕實現方案
• 24款非常實用的 CSS3 工具終極收藏

?

　　現在有了?CSS3?的?border-radius?特性之后，實現邊框圓角效果就非常簡單了，而且其還有多個優(yōu)點：一是減少網站維護工作量；二是提高了網站的性能，少了對圖片的 HTTP 的請求，網頁載入速度將變快；三是增加視覺美觀性。

　　既然?border-radius?有這么多好處，我們就從他的語法，屬性和屬性值等方面來看其如何應用，又是如何制作圓角，還有就是除了制作圓角他還能制作什么？有這么多，那我們就開始吧：

基本語法：

　　border-radius ： none | <length>{1,4} [/ <length>{1,4} ]?

取值范圍：

　　<length>： 由浮點數字和單位標識符組成的長度值。不可為負值。

簡單說明：

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

　　1、只有一個值，那么 top-left、top-right、bottom-right、bottom-left 四個值相等。

　　2、有兩個值，那么 top-left 等于 bottom-right，并且取第一個值；top-right 等于 bottom-left，并且取第二個值

　　3、有三個值，其中第一個值是設置top-left;而第二個值是 top-right 和 bottom-left 并且他們會相等,第三個值是設置 bottom-right。

　　4、有四個值，其中第一個值是設置 top-left 而第二個值是 top-right 第三個值 bottom-right 第四個值是設置 bottom-left。

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

border-top-left-radius: <length> <length> //左上角 border-top-right-radius: <length> <length> //右上角 border-bottom-right-radius:<length> <length> //右下角 border-bottom-left-radius:<length> <length> //左下角

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

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

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

-moz-border-radius-topleft: //左上角 -moz-border-radius-topright: //右上角 -moz-border-radius-bottomright: //右下角 -moz-border-radius-bottomleft: //左下角 　　等價于： -moz-border-radius: //簡寫

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

-webkit-border-top-left-radius: //左上角 -webkit-border-top-right-radius: //右上角 -webkit-border-bottom-right-radius: //右下角 -webkit-border-bottom-left-radius: // 左下角 等價于： -webkit-border-radius: //簡寫

　　3、Opera瀏覽器：

border-top-left-radius: //左上角 border-top-right-radius: //右上角 border-bottom-right-radius: //右下角 border-bottom-left-radius: //左下角 等價于： border-radius: //簡寫

　　4、Trident (IE)

　　IE9 以下版本不支持 border-radius，而且 IE9 沒有私有格式，都是用 border-radius，其寫法和 Opera 是一樣的，這里就不在重復。

　　為了不管是新版還是老版的各種內核瀏覽器都能支持 border-radius 屬性，那么我們在具體應用中時需要把我們的 border-radius 格式改成：

-moz-border-radius: none | <length>{1,4} [/ <length>{1,4} ]? -webkit-border-radius: none | <length>{1,4} [/ <length>{1,4} ]? border-radius: none | <length>{1,4} [/ <length>{1,4} ]?

　　其拆分開來的格式相應需要加上 -moz 和 -webkit，上面的代碼其實就等價于下面的代碼：

-moz-border-radius-topleft: <length> <length> //左上角 -moz-border-radius-topright: <length> <length> //右上角 -moz-border-radius-bottomright: <length> <length> //右下角 -moz-border-radius-bottomleft: <length> <length> //左下角 -webkit-border-top-left-radius: <length> <length> //左上角 -webkit-border-top-right-radius: <length> <length> //右上角 -webkit-border-bottom-right-radius: <length> <length> //右下角 -webkit-border-bottom-left-radius: <length> <length> // 左下角 border-top-left-radius: <length> <length> //左上角 border-top-right-radius: <length> <length> //右上角 border-bottom-right-radius: <length> <length> //右下角 border-bottom-left-radius: <length> <length> //左下角

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

　　我們初步來看一個實例，HTML代碼：

<div class="demo"></div>

　　為了更好的看出效果，我們給這個demo添加一點樣式：

.demo {width: 150px;height: 80px;border: 2px solid #f36;background: #ccc; }

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

.demo {border-radius: 10px 15px 20px 30px / 20px 30px 10px 15px; }

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

.demo {border-top-left-radius: 10px 20px;border-top-right-radius: 15px 30px;border-bottom-right-radius: 20px 10px;border-bottom-left-radius: 30px 15px; }

　　不仿看看他們的效果：

　　

　　三、支持的瀏覽器：

　　

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

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

.demo {border-radius: 10px; } 其等價于： .demo{border-top-left-radius: 10px;border-top-right-radius: 10px;border-bottom-right-radius: 10px;border-bottom-left-radius: 10px; }

　　效果：

　　

　　二：border-radius設置兩個值，此時top-left等于bottom-right并且他們取第一個值；top-right等于bottom-left并且他們取第二個值，也就是說元素 左上角和右下角相同，右上角和左下角相同

.demo {border-radius: 10px 20px; }

　　等價于：

.demo {border-top-left-radius: 10px;border-bottom-right-radius: 10px;border-top-right-radius: 20px;border-bottom-left-radius: 20px; }

　　效果：

　　

　　三：border-radius設置三個值，此時top-left取第一個值，top-right等于bottom-left并且他們取第二個值，bottom-right取第三個值：

.demo {border-radius: 10px 20px 30px; }

　　等價于：

.demo {border-top-left-radius: 10px;border-top-right-radius: 20px;border-bottom-left-radius: 20px;border-bottom-right-radius: 30px; }

　　效果：

　　

　　四：border-radius設置四個值，此時top-left取第一個值，top-right取第二個值，bottom-right取第三個值.bottom-left取第四個值：

.demo {border-radius:10px 20px 30px 40px; }

　　等價于：

.demo {border-top-left-radius: 10px;border-top-right-radius: 20px;border-bottom-right-radius: 30px;border-bottom-left-radius: 40px; }

　　效果：

　　

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

　　上面四個實例都是水平和垂直半徑相等情況下border-radius的應用，下面我們來看幾個水平和垂直半徑值不一樣的實例：

　　一、border-radius: 水平 / 垂直：只設置一個水平和一個垂直半徑時，那么水平半徑分別指定了元素個四個角的水平半徑值，同樣垂直半徑指定了元素的垂直半徑值，此時四個角具有相同的效果，因為他們具有相同的值：

.demo {border-radius: 10px / 20px; }

　　等價于：?

.demo {border-top-left-radius: 10px 20px;border-top-right-radius: 10px 20px;border-bottom-right-radius: 10px 20px;border-bottom-left-radius: 10px 20px; }　

　　效果：

　　

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

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

border-top-left-radius: 水平1 垂直1； border-bottom-right-radius: 水平1 垂直1； border-top-right-radius: 水平2 垂直2； border-bottom-left-radius: 水平2 垂直2;

　　具體我們來看下面的實例：

.demo {border-radius: 10px 20px / 20px 10px; }　

　　等價于：

.demo {border-top-left-radius: 10px 20px;border-bottom-right-radius: 10px 20px;border-top-right-radius: 20px 10px;border-bottom-left-radius: 20px 10px; }

　　效果：

　　

　　上面兩種都是相互對應的取值，我們來看一個實例，水平有三個取值，而 垂直只有兩個取值：

.demo {border-radius: 10px 20px 30px / 50px 60px; }

　　等價于：

.demo {border-top-left-radius: 10px 50px;border-top-right-radius: 20px 60px;border-bottom-left-radius: 20px 60px;border-bottom-right-radius: 30px 50px; }

　　效果：

　　

　　我們從上面等價代碼中可以知道，不管他們怎么取值，“/”前后各自按TRBL順序取值。

　　上面幾種都是我們常見的一些應用，那下面我們來看幾種特殊點的應用：

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

.border-big {border: 15px solid green;border-radius: 15px; }

　　效果：

　　

　　我們接著上面這個例子，把 border-radius半徑值改成比邊框值大一點：

.border-small {border: 15px solid green;border-radius: 25px; }

　　效果：

　　

　　為何當border-radius的半徑小于元素邊框的厚度時，內部沒有圓角效果？我在這里說一下，因為我們的border-radius的內徑值是等于外徑值減去邊框厚度值，當他們的值為負時，內徑默認為0,最前面講border-radius取值時就說過其值不能為負值。同時也說明border-radius的內外曲線的圓心并不一定是一致的。只有當邊框厚度為0時，我們內外曲線的圓心才會在同一位置。

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

.demo {border-width: 10px 5px 20px 3px;border-radius: 30px; }

　　效果：

　　

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

.demo {border-color: red green blue orange;border-width: 15px 30px 30px 80px;border-radius: 50px; }

　　效果：

　　

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

　　border-radius能應用在各種元素中，但在img和table應用時會有點差別的，首先先來看圖片上應用border-radius時的情況。在img上應用border-radius到目前只有Firefox4.0+瀏覽器才正常，而在其他瀏覽器都不能對圖片進行剪切，我們先來看一個實例：

img {border: 5px solid green;border-radius: 15px; }

　　我們來看其在各瀏覽器下的效果：

　　

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

table {border-collapse: collapse;border: 2px solid red;background: green;border-radius: 15px; }

　　效果：

　　

　　關于表格的demo可以查看這里。

　　那么到此，我們border-radius的一些用法就介紹完了。希望能給大家?guī)硪稽c幫助，感興趣的朋友可以觀注本站后面的內容，我們下節(jié)將介紹CSS3中的文本陰影（text-shadow）的用法。更希望感興趣的朋友一起探討和學習?CSS3?更多的技術知識。

您可能感興趣的相關文章

• CSS3 入門教程系列：CSS3 RGBA
• CSS3 Media Queries 實現響應式設計
• 35個讓人驚訝的 CSS3 動畫效果演示
• 推薦12個漂亮的 CSS3 按鈕實現方案
• 24款非常實用的 CSS3 工具終極收藏

?

本文鏈接：CSS3入門教程：CSS3圓角詳解（整理自：W3CPLUS）

編譯來源：夢想天空 ◆ 關注Web前端開發(fā)技術 ◆ 分享網頁設計資源

轉載于:https://www.cnblogs.com/lhb25/archive/2013/01/30/css3-border-radius.html

總結

以上是生活随笔為你收集整理的CSS3 经典教程系列：CSS3 圆角（border-radius）详解的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。