複製鏈接
請複製以下鏈接發送給好友

圓角

鎖定
圓角是用一段與角的兩邊相切的圓弧替換原來的角,圓角的大小用圓弧的半徑表示。在網頁設計越來越精美的今天,圓角的應用已經越來越廣泛。
中文名
圓角
外文名
Fillet
釋    義
一段與角的兩邊相切的圓弧
表示方式
用圓弧的半徑表示
應    用
網頁設計
創建方法
CSS3,CSS3+圖片等

圓角定義

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

圓角創建方法

CSS3
隨着HTML5/CSS3的到來,CSS3樣式的圓角必將成為構建未來網站的趨勢。CSS3相對於其它方式,更加容易應用,不需要額外的HTML標記和圖片。支持CSS3圓角的瀏覽器包括FireFox,Chrome,Opera,IE9等;由於中文用户多使用IE,並且多為IE6-IE8,因此,CSS3的普及尚需時日。 [2] 
CSS+圖片
CSS2圓角一般需要額外的HTML標記和圖片,然而其優點也是非常明顯的:支持所有主流瀏覽器,包括IE(6-9),FireFox,Chrome,Opera等。
純CSS
純CSS圓角,不需要圖片,因此,網站加載速度更快,然而需要額外的HTML標記,並且效果也沒有帶圖片的圓角精美。 [3] 
JavaScript
JavaScript圓角不需要額外的HTML標記和圖片,有現成的代碼,一勞永逸。然而對於病毒氾濫的今天,很多用户會禁用JavaScript,對於用户體驗至上的網站,如果用户關閉掉JavaScript,自己所有的一切努力也就白費了。 [4] 

圓角圓角專利

蘋果此前獲得的諸多關於 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;
} [5] 
語法
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;} [6] 
參考資料
  • 1.    劉雲華, 陳立平, 鍾毅芳. 圓角特徵識別研究[J]. 圖學學報, 2004, 25(1):15-19.
  • 2.    王亞洲. 用CSS 3新特性實現圓角效果[J]. 程序員, 2010(12):108-110.
  • 3.    周劍強. 基於CSS技術的圓角矩形的實現[J]. 忻州師範學院學報, 2010, 26(5):28-30.
  • 4.    樊東燕. 基於CSS Sprites的可伸縮圓角矩形的設計[J]. 電腦知識與技術, 2010, 6(11):2618-2619.
  • 5.    張麗姿. 用DIV+CSS實現立體圓角邊框效果[J]. 忻州師範學院學報, 2010, 26(5):33-35.
  • 6.    金永霞, 陳正鳴. 改進的圓角特徵識別與抑制方法[J]. 計算機應用, 2009, 29(8):2038-2042.