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%` 可以把边框设置为圆圈。