在css 设置样式的时候，有时候会用到将元素的边框设置为圆形的样子的时候，一般都是通常直接设置：{border-radius:5px },这样就行了，但是到底是什么意思，一直以来都没有弄明白，只是知道这样设置可以将边框设置成圆形的样子
其实：border-radius 属性的参数，不仅仅可以写一个参数，也可以写两个参数，三个参数，或者四个参数，另外，还可以写写百分比(这里的百分比，是针对border本身的尺寸来的）
格式：
border-radius:none | length{1,4}[/length{1,4}]
其中，length 也可以使用百分比来表示
1. 当 border-radius 为none 时，表示不进行圆弧式的修边
2. 当 length 有值时，有几种情况
2.1 length有一个值，这时border 的四个角的 border-radius 都是一样的值 ，即 border-top-left ,border-top-right,border-bottom-right,border-bottom-left 四个值都相等
2.2 length 有两个值时，border 对角的 border-radius 相等，第一个值为 border-top-left/border-bottom-right ,第二个值为border-right-top / border-bottom-left
2.3 length 有三个值时，第一个值为 border-top-left,第二个值为border-top-right/border-bottom-left, 第三个值为border-bottom-right
2.4 length 有四个值时，第一个值为 border-top-left,第二个值为border-top-right, 第三个值为border-bottom-right，第四个值为border-bottom-left
顺序：顺时针排序
2.5 此外，还需要做浏览器兼容：如
-webkit-border-radius: 10px 20px 30px;
-moz-border-radius: 10px 20px 30px;
border-radius: 10px 20px 30px;
3.设置一个图片的角落成圆弧型的效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
img {
margin: 100px;
border-radius: 15px;
}
</style>
</head>
<body>
<div>
<img src="./110.jpg" alt="" width="230" height="160">
</div>
</body>
</html>
运行效果：
设置border-radius 参数为两个时：
<style>
img {
margin: 100px;
border-radius: 15px 5px;
}
</style>
设置border-radius 参数为3个时：
<style>
img {
margin: 100px;
border-radius: 30px 20px 10px;
}
</style>
设置border-radius 参数为4 个是时：
<style>
img {
margin: 100px;
border-radius: 30px 20px 10px 5px;
}
</style>
设置弧形半径为百分比时：
<style>
img {
margin: 100px;
border-radius: 10% 35%;
}
</style>
