一、官方解釋

設定或檢索物件使用圓角邊框。提供2個引數，2個引數以“/”分隔，每個引數允許設定1~4個引數值，第1個引數表示水平半徑，第2個引數表示垂直半徑，如第2個引數省略，則預設等於第1個引數。

水平半徑：如果提供全部四個引數值，將按上左(top-left)、上右(top-right)、下右(bottom-right)、下左(bottom-left)的順序作用於四個角。

如果只提供一個，將用於全部的於四個角。

如果提供兩個，第一個用於上左(top-left)、下右(bottom-right)，第二個用於上右(top-right)、下左(bottom-left)。

如果提供三個，第一個用於上左(top-left)，第二個用於上右(top-right)、下左(bottom-left)，第三個用於下右(bottom-right)。

垂直半徑也遵循以上4點。

對應的指令碼特性為borderRadius。

二、例子

2.1 四個引數值

<div style="width: 100px;height: 100px;border:50px solid red;border-radius: 50px;"></div>

<div style="width: 100px;height: 100px;border:50px solid red;border-radius: 100px;"></div>

<div style="width: 100px;height: 100px;border:50px solid red;border-radius: 50px 100px;"></div>

<div style="width: 100px;height: 100px;border:50px solid red;border-radius: 10px 30px 50px 100px;"></div>

所以border-radius裡面的引數應該代表的是四個角上圓的半徑。

2.2 百分比

<div style="width: 100px;height: 100px;border:50px solid red;border-radius: 25%;"></div>

<div style="width: 100px;height: 100px;border:50px solid red;border-radius: 50%;"></div>

2.3 水平半徑/垂直半徑

<div style="width: 100px;height: 200px;border:50px solid red;border-radius: 100px/150px;"></div>

<div style="width: 100px;height: 200px;border:50px solid red;border-radius: 200px/300px;"></div>

<div style="width: 100px;height: 200px;border:50px solid red;border-radius: 200px/200px;"></div>

這裡的半徑全等於本身寬度(width/2)+半徑寬度(border-width/2)即為一個橢圓。另外半徑最多渲染寬度(width/2)+半徑寬度(border-width/2)的值，超過的按比例值來算。