圓角

圓角是用一段與角的兩邊相切的圓弧替換原來的角，圓角的大小用圓弧的半徑表示。在網頁設計越來越精美的今天，圓角的套用已經越來越廣泛。

基本介紹

• 中文名：圓角
• 外文名：Fillet
• 釋義：一段與角的兩邊相切的圓弧
• 表示方式：用圓弧的半徑表示
• 套用：網頁設計
• 創建方法：CSS3，CSS3+圖片等

定義

圓角是用一段與角的兩邊相切的圓弧替換原來的角，圓角的大小用圓弧的半徑表示。

創建圓角的方法

CSS3

隨著HTML5/CSS3的到來，CSS3樣式的圓角必將成為構建未來網站的趨勢。CSS3相對於其它方式，更加容易套用，不需要額外的HTML標記和圖片。目前支持CSS3圓角的瀏覽器包括FireFox,Chrome,Opera,IE9等；由於目前中文用戶多使用IE，並且多為IE6-IE8，因此，CSS3的普及尚需時日。

CSS+圖片

CSS2圓角一般需要額外的HTML標記和圖片，然而其優點也是非常明顯的：支持所有主流瀏覽器，包括IE(6-9),FireFox,Chrome,Opera等。

純CSS

純CSS圓角，不需要圖片，因此，網站載入速度更快，然而需要額外的HTML標記，並且效果也沒有帶圖片的圓角精美。

JavaScript

JavaScript圓角不需要額外的HTML標記和圖片，有現成的代碼，一勞永逸。然而對於病毒泛濫的今天，很多用戶會禁用JavaScript，對於用戶體驗至上的網站，如果用戶關閉掉JavaScript，自己所有的一切努力也就白費了。

圓角專利

蘋果此前獲得的諸多關於 iPhone 和 iPad 的專利中或多或少都會包含一些實際的功能，比如 Home 鍵、背面輪廓設計或者前面板整體玻璃覆蓋設計等。但此次獲得的專利卻單單描述了一個設備的外觀設計，矩形圓角。這項專利的適用場景真的太廣了，當然你可以說專利圖中的畫像將這項專利限制在特定長寬比的設備中，這樣有著其他尺寸和比例的平板還是可以不侵權的。

圓角生成軟體

Rounded Corner

Rounded Corner支持多種樣式的圓角生成，可以生成標準圓角，帶框線的圓角，帶漸變色的圓角，並且可以集成CSS Sprite技術，從而加快網站載入速度，提高用戶體驗。

該工具支持中文。

純CSS圓角生成器

SpiffyCorners可可以創建純CSS格式的代碼，目前不支持中文。

JQuery Corner

JQuery Rounded Corner作為JQuery的外掛程式，是套用最廣的JavaScript圓角外掛程式。

程式

向 div 元素添加圓角框線：

div{

border:2px solid;

border-radius:25px;

}

語法

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

取值

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

說明

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

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

2、border-radius:[ <length>{1,4} ] [ <length>{1,4} ] ; //這裡設定兩個值，那么top-left等於bottom-right，並且取第一個值；top-right等於bottom-left，並且取第二個值

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

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

前面，我們主要看了border-radius的縮寫格式，其實border-radius和border屬性一樣，還可以把各個角單獨拆分出來，也就是以下四種寫法，這裡我規納一點，他們都是先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> //左下角

在瀏覽器下的書寫格式

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)

IE<9不支持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} ]?

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;}