border-radius的水平和豎直半徑

一般咱們設置border-radius都只區分四個角的, 如border-radius: 1em 2em.

其實每一個角的border-radius都由兩部分組成, 水平半徑和豎直半徑.

要設置水平和豎直半徑, 用border-top-left-radius設置時應該寫成border-top-left-radius: 1em 2em, 可是用border-radius設置時則應該寫成border-radius: 1em / 2em.

_(:3」∠)_

若是懵逼了請往下看.

border-*-radius

當你直接設置某個角的border-radius時, 即設置border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius中的一個時, 賦值的形式應爲[ <length> | <percentage> ]{1,2}.

• 第一個值爲水平半徑, 第二個值爲豎直半徑.
• 若是未給出第二個值, 則豎直半徑等於水平半徑.
• 任意一個值爲0, 則該角爲直角.
• 若值爲百分比, 則水平半徑相對於邊框盒(border box)的寬度, 豎直半徑相對於邊框盒的高度.

舉例:

border-top-left-radius: 5em 40%意爲, 該元素的左上角邊框的水平半徑爲5em, 豎直半徑爲邊框盒高度的40%.

border-radius

賦值形式應爲[ <length> | <percentage> ]{1,4} [ / [ <length> | <percentage> ]{1,4} ]?.

• 若是/先後都有值, 則/以前的值設置水平半徑, 以後的值設定豎直半徑.
• 若是沒有/, 則所賦值同時設置水平和豎直半徑.
• 賦值順序爲"左上", "右上", "右下", "左下".
• 取對角值的狀況: 若"左下"未賦值則取"右上"的值; 若"右下"未賦值則取"左上"的值
• 只賦了一個值的狀況: 若是"右上"未賦值則取"左上"的值.

舉例:

border-radius: 1em/5em;

/* 至關於 */

border-top-left-radius:     1em 5em;
border-top-right-radius:    1em 5em;
border-bottom-right-radius: 1em 5em;
border-bottom-left-radius:  1em 5em;

border-radius: 4px 3px 6px / 2px 4px;

/* 至關於 */

border-top-left-radius:     4px 2px;
border-top-right-radius:    3px 4px;
border-bottom-right-radius: 6px 2px;
border-bottom-left-radius:  3px 4px;

利用這些知識, 能夠畫出四分之一圓或半橢圓.

Chrome上的半橢圓問題

在作半橢圓的例子的時候發現了一個Chrome上的異常行爲.

若是寫成border-radius: 100% 0 0 100% / 50%, 則能夠正常繪製半橢圓.

若是寫成border-radius: 100% / 50% 0 0 50%, 繪製出來的卻不是半橢圓.

效果圖以下:

可是按理說它們都應該至關於"左上左下爲100% 50%, 右上右下爲0, 即直角".

Chrome中能夠看到這兩種寫法的計算值分別爲:

/* 正常半橢圓 */
border-bottom-left-radius:100% 50%;
border-bottom-right-radius:0px 50%;
border-top-left-radius:100% 50%;
border-top-right-radius:0px 50%;

/* 錯誤半橢圓 */
border-bottom-left-radius:100% 50%;
border-bottom-right-radius:100% 0px;
border-top-left-radius:100% 50%;
border-top-right-radius:100% 0px;

試驗了下, 在IE11和Safari中看到的都是正常的, 可是在Chrome和Firefox中看到的都是這種異常狀況.

如下, 上面是border-radius: 100% 0 0 100% / 50%寫法, 下面是border-radius: 100% / 50% 0 0 50%, 能夠看看你的瀏覽器是否區別對待了.

不清楚這是一個Chromium的bug仍是有意爲之. 至少根據W3C的標準來看, 應該是個bug, 已經提issue到chromium.

參考

1. 用css3繪製你須要的幾何圖形
2. border-radius - CSS | MDN
3. CSS Backgrounds and Borders Module Level 3 | W3C