border-radius的水準和豎直半徑

通常我們設定`border-radius`都隻區分四個角的, 如`border-radius: 1em 2em`.

其實每個角的`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%

, 右上右下為

, 即直角".

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.

參考

用css3繪制你需要的幾何圖形
border-radius - CSS | MDN
CSS Backgrounds and Borders Module Level 3 | W3C