border的理解

border-radius 圓角的使用

IE9+、Firefox 4+、Chrome、Safari 5+ 以及 Opera 支持 border-radius 屬性。

border-radius 是一個簡寫屬性, 分別指定左上角 border-top-left-radius、右上角 border-top-right-radius、右下角 border-bottom-right-radius、左下角 border-bottom-left-radius的圓角半徑。

border-radius 能夠分別設置水平半徑和垂直半徑, 以 "/" 分隔, 水平和垂直半徑均可以設置1-4個值,分別指定四個角的半徑, 能夠是具體的長度值也能夠是百分比。

如: border-radius: 50% / 20%; 斜線"/"以前的表示四個角的水平半徑均爲50%, 以後的表示四個角的垂直半徑均爲20%。

不管是水平半徑仍是垂直半徑都遵循一下規則:

1. 若是隻設置一個值，將用於所有的四個角;
2. 若是設置兩個值，第一個用於左上角、右下角，第二個用於右上角、左下角;
3. 若是設置三個值，第一個用於左上角，第二個用於右上角和左下角，第三個用於右下角;
4. 若是設置4個值，則分別做用於四個角[能夠聯想margin]。

自適應橢圓的實現

這裏須要使用百分比。

代碼示例:

border-radius: 50% /50% ; 或者 border-radius: 50% ;

注意: 這裏設置的百分比不管是單獨指定水平半徑、垂直半徑仍是統一指定, 均是根據百分比, 分別相對 border box 的寬度和高度進行計算。也就是說相同的百分比可能會計算出不一樣的水平和垂直半徑。

好比設置 border-radius: 50% , border box的寬度高度分別是200px 100px, 則根據50%計算出的水平半徑爲 100px, 垂直半徑爲 50px。

上圖中半橢圓水平對稱, 因此左上角和左下角的半徑相等, 右上角和右下角的半徑相等;

圖中整個左側是一條曲線且佔據了整個寬度, 也就是說左上角和左下角的垂直半徑之和等於整個形狀的高度, 水平半徑應該爲整個形狀的寬度; 而右側沒有任何圓角, 因此右上角的右下角的垂直半徑之和也應該爲整個形狀的高度, 水平方向爲0。

觀察上圖中的四分之一橢圓, 很容易能夠看出整個圓角都集中在左上角, 而其餘三個角都沒有圓角。

代碼示例：

border-radius: 100% 0 0 100% / 50%; /* 半橢圓 */ border-radius: 100% 0 0 0; /* 四分之一橢圓 */

/*1-5個圖形，分別設置*/ border-radius: 50% / 100%; border-radius: 10% / 50%; border-radius: 10% 50% / 100%; border-radius: 100% 10% 10% 10%; border-radius: 40% 40% 20% 20% / 100% 100% 50% 50%;

注意: 當任意兩個相鄰圓角的半徑之和超過border box的尺寸時, 用戶代理必須按比例減少各個邊框所使用的值, 直到它們不會相互重疊爲止。拿上圖中最後一個圖形舉例說明。

假設盒子的寬高分別爲: 800px 400px, 按照border-radius設置的百分比半徑, 分別計算:

左上角半徑：320px 400px 右上角半徑：320px 400px 左下角半徑：160px 200px 右下角半徑：160px 200px

很明顯, 此時左上角和左下角的垂直半徑之和[400px+200px]大於盒子的高度[400px], 同理右上角和右下角的垂直半徑之和也大於盒子的高度。

根據上述理論, 用戶代理必須按比例減少各個邊框所使用的值, 直到它們不會相互重疊爲止。固然按比例縮小這一步操做是由瀏覽器完成, 下面只是模擬瀏覽器繪製圓角邊框的過程。

縮小後的半徑爲: 左上角半徑：320px 267px 右上角半徑：320px 133px 左下角半徑：160px 133px 右下角半徑：160px 267px

左上角和左下角根據新的半徑, 畫圓效果以下圖所示:

藍色線爲左上角半徑畫圓, 黃色線爲左下角半徑畫圓