border-radius 詳解及示例

border-radius [ˈbɔrdə(r)] - [ˈrediəs]

 

英文示意：

border：邊界，國界，邊疆

radius：半徑，範圍

 

定義：　

複合寫法：

border-radius: [ length | % ] (能夠設置寬度／百分比);

border-radius: [ length | % ] {1,4} (四個角：左上，右上，右下，左下 即順時針方向);

border-radius: [ length | % ] {1,4} / [ length | % ] {1,4}(水平方向／垂直方向);

拆分寫法：

border-垂直方向-水平方向-radius: 水平半徑,垂直半徑

border-top-left-radius: [ length | % ] {1,2} (左上角，第一參數表明水平半徑，第二個參數表明垂直半徑，若第二個參數省略，默認等於第一個參數);

border-top-right-radius:  [ length | % ] {1,2} (右上角)

border-bottom-left-radius: [ length | % ] {1,2} (左下角)

border-bottom-right-radius: [ length | % ] {1,2} (右下角)

名詞解釋：

半徑：邊角距離圓切點的距離

百分比：寬度高度，邊框，內邊距的和做爲基準值

 

特性：

任意相鄰圓角的半徑和大於邊框長度時，會按照比例減小半徑值，直到他們不會被重疊

任意圓角的水平半徑和垂直半徑比例恆定不變（水平半徑過長，超過邊框長度時，會將水平半徑縮小，對應會按照比例減小垂直半徑的長度）

 

示例：

四邊頂角，半徑均爲長寬的一半，顯示爲標準圓形;

height: 100px;
width: 100px;
border-radius:50px 50px 50px 50px / 50px 50px 50px 50px;

左側頂角，水平方向半徑20px，垂直方向半徑50px;

 height: 100px;
 width: 100px;
 border-radius:20px 50px 0 0 / 50px 50px 0 0;

異形，說明水平垂直比例縮放

height: 100px;
width: 100px;
border-radius:200px 0 0 0 / 50px 0 0 0;

左側頂角，水平方向半徑200px，垂直方向半徑50px;

因爲水平半徑長度大於100px，會將水平半徑縮短爲100px，又由於水平與垂直半徑比例不變

當前水平半徑輸入值是垂直半徑輸入值的4倍，而水平真實半徑爲100px，因此垂直真實半徑縮短爲25px;

 

半橢圓

height: 50px;
width: 100px;
border-radius:50% 50% 0 0 / 100% 100% 0 0;

四分之一橢圓

height: 100px;
width: 100px;
border-radius:100% 0 0 0 / 100% 0 0 0;

四分之一橢圓，加上邊框的效果示意:

border-left: 5px solid #5e77bf;
background-color: transparent;

border-top: 5px solid #5e77bf;
background-color: transparent;

同心圓的實現:

height: 100px;
width: 100px;
border-radius:50%;
border-top: 5px solid #5e77bf;
background-color: transparent;