border-radius · 跟老司機學CSS3

**border-radius** * 描述：設置對象圓角邊框屬性。 * 版本：CSS3 * 繼承性：無 **語法** ``` border-radius：數值 ``` 數值種類 * 長度（length）：使用長度值設置對象圓角半徑的長度，不允許負值。 * 百分比（percentage）：使用百分比設置對象圓角半徑的長度，不允許負值。 **使用說明** 可以提供 2 個參數，參數 1 表示水平半徑，參數 2 表示垂直半徑，2 個參數以 “/” 分隔，每個參數可以設置 1~4 個參數值，如果參數 2 省略，則默認參數 2 等于參數 1。水平半徑：如果提供 4 個參數值，將按上左(top-left)、上右(top-right)、下右(bottom-right)、下左(bottom-left) 的順序作用于四個角。如果提供 3 個參數值，第一個用于上左(top-left)，第二個用于上右(top-right)、下左(bottom-left)，第三個用于下右(bottom-right)。如果提供兩個，第一個用于上左(top-left)、下右(bottom-right)，第二個用于上右(top-right)、下左(bottom-left)。如果只提供一個，將用于全部的于四個角。垂直半徑同樣類似。 **代碼示例** ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>border-left</title> <style> #container{ width: 50px; height: 50px; border: 2px solid #000000; border-radius: 1px 15px 15px 15px; } </style> </head> <body> <div id="container"> </div> </body> </html> ``` ![border-radius](https://box.kancloud.cn/09abe139da0f17f483139c67e778e2cb_66x67.png) 通過 `border-radius: 50%` 可以把邊框設置為圓圈。