在css3中提供了對邊框進行圓角設定的支援，可對邊框1~4個角進行圓角樣式設定。
1. 介紹
2. value值的格式和型別
3. border-radius 1~4個引數說明
css3提供了5種圓角屬性：
border-radius ：同時設定4個邊框的圓角樣式。
border-top-left-radius ：設定左上角邊框的圓角樣式。
border-top-right-radius ：設定右上角邊框的圓角樣式。
border-bottom-left-radius ：設定左下角邊框的圓角樣式。
border-bottom-right-radius ：設定右下角邊框的圓角樣式。
示例：
最小版本支援：ie 9 、chrome 4
規範：
文件：
border-*-radius屬性的值可分別設定水平半徑和垂直半徑；若省略垂直半徑，則垂直半徑預設採用水平半徑的值。
而每個值，支援的單位有固定長度和百分比。若設定百分比格式，則水平半徑的百分比是指邊框的寬度，而垂直半徑的百分比是指邊框的高度。
組合如下(以border-radius為例)：
1) border-radius:20px; // 表示圓角的水平半徑和垂直半徑都為20px長度。
2) border-radius:20px/40px; // 表示圓角的水平半徑的長度為20px，垂直半徑的長度為20px。
3) border-radius:20%; // 表示圓角的水平半徑和垂直半徑都為各自邊框長度的20%。
4) border-radius:20%/30%; // 表示圓角的水平半徑為邊框寬度的20%，垂直半徑都為邊框高度的20%。
5) border-radius:20px/30%; // 表示圓角的水平半徑長度20px，垂直半徑都為邊框高度的20%。
示例：
border-radius可以一次性對四個角設定相同的值，也可以對4個角分別設定圓角樣式。
而秘訣就在於設定border-radius的引數個數。
首先看下css規範對border-radius的引數說明：[ | ] [ / [ | ] ]?
可得知border-radius的引數個數範圍為1~4個，這裡要注意點水平半徑和垂直半徑的分別使用時：在border-radius中先設定4個邊角的水平半徑再設定4個邊角的垂直半徑。
下面分別說明引數1~4個引數所代表的含義：
說明：4個邊框的圓角樣式都採用這個設定。
示例：border-radius: 20px; // 4個邊框圓角樣式都為20px
說明：
第①引數：左上角和右下角邊框的圓角樣式。
第②引數：右上角和左下角邊框的圓角樣式。
示例：border-radius: 20px 40px; // 左上角和右下角：20px；右上角和左下角：40px
說明：
第①引數：左上角邊框的圓角樣式。
第②引數：右上角和左下角邊框的圓角樣式。
第③引數：右下角邊框的圓角樣式。
示例：border-radius:20px 40px 60px; // 左上角：20px；右上角和左下角：40px；右下角：60px
說明：
第①引數：左上角邊框的圓角樣式。
第②引數：右上角邊框的圓角樣式。
第③引數：右下角邊框的圓角樣式。
第④引數：左下角邊框的圓角樣式。
示例：border-radius:20px 40px 60px 80px; // 左上角：20px；右上角：40px；右下角：60px；左下角：80px
******************************====系列文章****************************************==
本篇文章：8.1 css3 border-radius邊框圓角
web開發之路系列文章
CSS3 CSS3外輪廓屬性
外輪廓outline在頁面中呈現的效果和邊框border呈現的效果極其相似，但和元素邊框border完全不同，外輪廓線不占用網頁布局空間，不一定是矩形，外輪廓是屬於一種動態樣式，只有元素獲取到焦點或者被啟用時呈現。outline屬性早在css2中就出現了，主要是用來在元素周圍繪製一條輪廓線，可以起到...
css3 css的3種引入方式
你好！這是你第一次使用css所需要了解的知識點。如果你想學習如何使用css,可以仔細閱讀這篇文章，了解一下css的基本語法知識。css的引入方式共有三種 行內樣式 內部樣式表 外部樣式表。使用style屬性引入css樣式。示例 直接在html標籤中設定的樣式 實際在寫頁面時不提倡使用，在測試的時候可...
css3新動 CSS3 動畫
注意 1 animation play state 也是 animation 的簡寫屬性，但在 webkit 中不適用 animation myfirst 5s infinite linear paused 即 animation name myfirst animation duration 5s...