border-radius:
1、一个数值 四个角都相等，水平垂直相等
2、两个数值并用“ /” 连接 四个角弧度均相同 每个角的弧度 水平距离为50% 垂直距离为20%*
3、两个数值用 空格隔开 20px 60px 20px左上角右下角 60px 右上和左下
4、三个数值 20px 40px 60px 20px左上角 40px 对角线上两个角 60px 右下角
5、四个数值 20px 30px 40px 60px; /* 顺时针方向 */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>买了否冷</title>
<style>
.box{
width: 200px;
height: 200px;
background-color: #ff6700;
float: left;
margin: 20px;
}
.box:first-child{
border-radius: 50%;
}
.box:nth-of-type(2){
border-radius: 20% 40%;
}
.box:nth-of-type(3){
border-radius: 40% 20%;
}
.box:nth-of-type(4){
border-radius: 20%/20%;
}
</style>
</head>
<body>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<script></script>
</body>
</html>
