最近学习了一下border-radius属性，试着自己使用这个属性画一下常见图形，效果如下：
一、圆形
画出圆心就很简单，设置为50%即可,代码如下：
.circular1 {width: 150px;height: 150px;background-color: #00A2FF;border-radius: 50%;}
二、半圆
半圆我想出两种方法，一种画出两个四分之一圆进行拼接，第二种是将下半部分裁剪，代码如下：
/* 半圆的第一种方法 */.half-circular1 {width: 75px;height: 75px;background-color: #00A2FF;border-radius: 0px 100% 0px 0px;}.half-circular2 {width: 75px;height: 75px;background-color: #00A2FF;border-radius: 0px 0px 100% 0px;}/* 半圆的第二种方法 */#c {width: 150px;height: 75px;border: 1px red solid;overflow: hidden;float: left;margin-right: 10px}.half-circular3 {width: 150px;height: 150px;background-color: #00A2FF;border-radius: 50%;}
三、鸡蛋
这个需要对水平方向和垂直方向进行操作，两组值由/分隔，代码如下：
.egg {width: 100px;height: 150px;background-color: #00A2FF;border-radius: 100% 100% 100% 100%/180px 180px 100px 100px;}
四：爱心
先做出上面是圆形，下方是长方形的拱门，再进行旋转即可得到，代码如下：
.heart::before {content: "";position: absolute;left: 20px;width: 70px;height: 115px;background: red;border-radius: 50px 50px 0 0;-webkit-transform: rotate(-45deg);-moz-transform: rotate(-45deg);-o-transform: rotate(-45deg);transform: rotate(-45deg);-webkit-transform-origin: left bottombottom;-moz-transform-origin: left bottombottom;-o-transform-origin: left bottombottom;transform-origin: left bottombottom;}.heart::after {content: "";position: absolute;left: 53px;width: 70px;height: 115px;background: red;border-radius: 50px 50px 0 0;-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);-o-transform: rotate(45deg);transform: rotate(45deg);-webkit-transform-origin: rightright bottombottom;-moz-transform-origin: rightright bottombottom;-o-transform-origin: rightright bottombottom;transform-origin: rightright bottombottom;}
