在制作网页的过程中，有时我们可能需要实现圆角的效果，以前的做法是通过切图（将设计稿切成便于制作成页面的图片），使用多个背景图像来实现圆角。在 CSS3 出现之后就不需要这么麻烦了，CSS3 中提供了一系列属性来设置元素的圆角效果，如下所示：
上述函数的可选值如下表所示：
border-radius用来实现圆角边框。
举例：
<html><head><style>div{width:300px;height:300px;border:1pxsolidred;border-radius:20px;}</style></head><body><div></div></body></html>运行结果：
但是如果我把border-radius设为150px，就会变成圆形边框
<html><head><style>div{width:300px;height:300px;border:1pxsolidred;border-radius:150px;}</style></head><body><div></div></body></html>运行结果：
为了方便，直接把border-radius设为50%也行。效果是一样的。
但是如果想画圆，则width和height必须要相等。
事实上，border-radius后可以接多个属性值，像上面的一个属性值则默认四角都为该属性值，若是四个属性值显然是与四角相对，这么个相对法呢？从左上角开始，顺时针一一对应。
举例说明：
<html><head><style>div{width:300px;height:300px;border:1pxsolidblack;background:rgb(0,162,255);border-radius:50px0px20px100px;}</style></head><body><div></div></body></html>运行结果：
举例画个鸡蛋吧：
<html><head><style>div{width:80px;height:100px;border:1pxsolidblack;background:rgb(0,162,255);border-radius:40px40px40px40px/60px60px40px40px;}</style></head><body><div></div></body></html>运行结果：
