border-radius 是一個複合 CSS 屬性，其包含的簡單屬性爲：
border-top-left-radius
border-top-right-radius
border-bottom-left-radius
border-bottom-right-radius
border-top-left-radius
-
定義
設置左上角邊框形狀。
-
用法
border-top-left-radius: length|% [length|%];
border-top-left-radius 屬性長度值和百分比值定義四分之一橢圓的半徑。第一個值是水平半徑，第二個值是垂直半徑。
示例1
.top-left-radius-number {
border-top-left-radius: 100px;
}
若屬性值中省略第二個值，則複製第一個值。所以上圖水平方向和垂直方向半徑相同。
示例2
.top-left-radius-percent {
border-top-left-radius: 50% 100%;
}
水平半徑的半分比值參考邊框盒的寬度，垂直半徑的百分比值參考邊框盒的高度。如圖，可以看到左上角水平方向半徑是寬度的一半，垂直方向半徑等於高度值。
示例3
.top-left-radius-rect {
border-top-left-radius: 0;
}
屬性值爲 0 時邊角爲方形，等價於不設置屬性的狀態。
border-radius
-
定義
設置邊框形狀。
-
用法
border-radius: 1-4 length|% / 1-4 length|%;
由於 border-radius 是一個複合屬性，結合其用法，可以得出 border-radius 是有多種使用方式的。
示例4
.one-radius {
border-radius: 100px;
}
設置一個 border-radius 值時，top-left、top-right、bottom-left 和 bottom-right 值相同。由示例1可知，水平方向和垂直方向值也相同。
示例5
.two-radius {
border-radius: 100px 50px;
}
設置兩個 border-radius 值時，bottom-left 與 top-right 值相同，bottom-right 與 top-left 值相同。這時水平方向和垂直方向值仍然相同。
示例6
.four-radius {
border-radius: 100px 50px 50px 100px;
}
設置四個 border-radius 值時，每一個方向上都有了自己的值，這時水平方向和垂直方向值依舊相同。
示例7
.border-radius-horizontal-vertical {
border-radius: 100px / 50px;
}
這裏我們通過符號 / 來區分水平方向和垂直方向， / 之前是水平方向的值，之後則是垂直方向的值。這樣水平方向和垂直方向就可以被賦予不同的值。
示例8
.eight-radius-horizontal-bigger {
border-radius: 50px 50px 50px 50px / 30px 30px 30px 30px;
}
那麼設置八個 border-radius 值時，就很好理解水平方向和垂直方向效果不同的原因了。
示例9
.eight-radius-vertical-bigger {
border-radius: 30px 30px 30px 30px / 50px 50px 50px 50px;
}
上圖與示例8的差別僅在於垂直方向的值大於水平方向的值。
---------
更多 CSS 技巧，請關注微信公衆號
公衆號菜單欄有微信交流羣，歡迎加入~~~