css border-radius（ 圆角边框）原理
border-radius: 50%;
当指定为百分比的时候，宽度乘百分比得到的数值作为半长轴，高度乘百分比得到的数值作为半短轴，得到一个椭圆，然后按下图切掉多余的部分。
border-radius: 50px;
当指定具体数值时，半长轴等于半短轴，得到一个圆，然后切掉多余的部分。
所以，如果我们想要一个圆可以这样做：
- 定义一个长度和宽度相同的盒子
- 让border-radius等于50%或者等于宽度的一半。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.circle {
width: 100px;
height: 100px;
border-radius: 50%;/* 或者 50px */
background-color: pink;
}
</style>
</head>
<body>
<div class="circle">
</div>
</body>
</html>
