1.圓角邊框簡介
就是通過border-radius屬性對元素的四個角進行設置｛屬性不具有繼承性｝。
border-radius有四個屬性分別是top，left，right，bottom，可以進行設置像素。也可以直接設置一個值四邊都是相等的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div{border: 5px solid red;
border-radius: 50px;
width: 50px;
height: 100px;
background-color: yellowgreen;
margin:auto;
box-shadow: 100px 100px 40px green;}
</style>
</head>
<body>
<div></div>
</body>
</html>
也可以同時設置兩個值border-radius: 50px 99px;對應的分別是上下是50px,左右是99px。 也可以設置三個值按順時針設置border-radius: 50px 99px 40px;其中的上面是50px，左面右面是99px,底邊是40px。
2.也可以使用border-radius：r來設置圓形這里的r是指半徑的大小（有長度單位），要創建圓形應該設置r的值為元素的高度和長度的一半。當高寬相等時這種取值的方法就是圓形改變寬和高就朝着橢圓形發展了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div{border: 5px solid red;
border-radius: 50%;
width: 100px;
height: 100px;
background-color: yellowgreen;
margin:auto;
box-shadow: 100px 100px 40px green;}
</style>
</head>
<body>
<div></div>
</body>
</html>
圓形：
橢圓形；
