border-radius
OK，這篇文章詳細介紹border-radius屬性的值得理解，以及在渲染上四個角的表現，如果平時只是用border-radius: 10px加圓角或者用border-radius: 50%做正圓形圖標，強烈建議看一下這篇文章；如果已經瞭解了border-radius的機制可以不用看下去了，當然如果有大佬看完了這篇文章發現了描述上、技術上、理解上的任何錯誤，還請在評論區多加指正，不勝感激！
簡單描述
用於給元素添加外邊框圓角
該屬性是四個屬性的簡寫，包括border-top-left-radius、border-top-right-radius、border-bottom-right-radius和 border-bottom-left-radius，
因此border-radius在設置邊框時，按照值的順序分別指示左上、右上、右下、左下，且每一個圓角都相當於是一個圓形或橢圓形的四分之一的弧。
圖示：
如上圖，樣式爲border-radius: 100px 40px 60px 70px / 40px 40px 120px 70px;，從左上到右下四個角分別是：橫軸半徑100px 豎軸半徑40px的橢圓、半徑爲40px的圓、橫軸半徑60px 豎軸半徑120px的橢圓、半徑爲70px的圓。
四角中每一個角設置圓角均需要兩個值，分別設置橢圓的長半軸長度和短半軸長度（如果是圓形則兩個值是相等的）。第一個值指示橫軸半徑，第二個值指示豎軸半徑。
示例1：
// 該左上角邊框是一個半徑爲20px的圓的四分之一
border-top-left-radius: 20px;
示例2：
// 該左上角邊框是一個橫軸半徑20px 豎軸半徑50px的橢圓的四分之一
border-top-left-radius: 20px 50px;
注：在元素沒有設置邊框的時候，圓角會作用在background上，鏈接
取值詳解
border-radius的值可以是固定長度（如px，em等等）或者百分比，其值所指示的是其對應的圓角的半徑長度。
下面通過示例來看它各種取值的含義：
示例1：
border-radius: 100px 40px 60px 70px / 40px 40px 120px 70px;
// 相當於
border-top-left-radius: 100px 40px;
border-top-right-radius: 40px 40px;
border-bottom-right-radius: 60px 120px;
border-bottom-left-radius: 70px 70px;
這就是上面圖對應的樣式代碼，也是該屬性的完整寫法，斜槓前指示四個角的橫軸半徑，斜槓後指示四個角的豎軸半徑。
示例2：
border-radius: 30px 50px 40px 35px;
// 相當於
border-radius: 30px 50px 40px 35px / 30px 50px 40px 35px;
// 相當於
border-top-left-radius: 30px 30px;
border-top-right-radius: 50px 50px;
border-bottom-right-radius: 40px 40px;
border-bottom-left-radius: 35px 35px;
沒有斜槓
/的情況下，每個角的橫軸半徑和豎軸半徑相同，也就是說每個角都是一個圓形的四分之一，
示例3：
border-radius: 40px 60px;
// 相當於
border-radius: 40px 60px 40px 60px;
// 相當於
border-radius: 40px 60px 40px 60px / 40px 60px 40px 60px;
// 相當於
border-top-left-radius: 40px 40px;
border-top-right-radius: 60px 60px;
border-bottom-right-radius: 40px 40px;
border-bottom-left-radius: 60px 60px;
如果只寫兩個值，則就像
margin屬性一樣，分別指對稱的兩個位置。在這裏40px指左上角和右下角，60px指右上角和左下角。