描述：
border-radius的使用、border的使用，然后绘制一些常见的图形，对于这些其实还有好多种的玩法，图形的组合等等。
效果图展示：
代码演示：
<!DOCTYPE html>
<html>
<head>
<title>图形的绘制</title>
<style>
*{
text-align: center;
}
.d1,.d2,.d3,.d4,.d5{
width: 300px;
height: 300px;
float: left;
margin: 20px;
}
.d1{
background-color: aqua;
border-radius: 50%;
}
.d2{
background-color: bisque;
border-radius: 50px;
}
.d3{
background-color: black;
color: aliceblue;
border-radius: 100% 0 0 0;
text-align: right;
line-height: 300px;
}
.d4{
width: 500px;
height: 300px;
background-color:blue;
border-radius: 50%;
font-size: 30px;
color: white;
line-height: 300px;
}
.d5,.d6,.d7,.d8{
background-color: brown;
color: white;
font-size: 30px;
line-height: 30px;
width: 0;
height: 0;
float: left;
border-top: 150px solid rgb(192, 121, 121);
border-right: 150px solid orange;
border-bottom: 150px solid yellow;
border-left: 150px solid green;
margin: 20px;
}
.d5{
border-left: none;
}
.d6{
border-top: none;
}
.d7{
border-bottom: none;
}
.d8{
border-right: none;
}
</style>
</head>
<body>
<div class="d1">圆形</div>
<div class="d2">圆角矩形</div>
<div class="d3">扇形（四分之一矩形）</div>
<div class="d4">椭圆</div>
<div class="d5"></div>
<div class="d6"></div>
<div class="d7"></div>
<div class="d8"></div>
</body>
</html>
