border-radius圆角边框属性讲解

border-radius圆角边框是CSS3的新属性，以前网页设计开发中要实现元素的圆角边框，通常是用背景图片来实现的。现在我们只需要给元素添加border-radius属性即可。

属性讲解

1、兼容性它是CSS3的新属性，兼容IE9+，Firefox 4+、Chrome、Safari 5+ 以及 Opera浏览器，对于一些较低版本的浏览器，我们可以添加相应的浏览器前缀来兼容。div {width: 500px;height: 300px;border: 1px solid black;-webkit-border-radius: 50%;-moz-border-radius: 50%;-o-border-radius: 50%;-ms-border-radius: 50%;}

4、四个属性值，分别表示左上角、右上角、右下角、左下角的圆角大小（顺时针方向）border-radius：10px 20px 30px 40px;

6、两个属性值，第一个值表示左上角和右下角，第二个值表示右上角和左下角。border-radius:20px 40px;

8、bor蟠校盯昂der-radius:60px 60px 60px 60px/100px 100px 60px 60px;CSS样式：.egg{ width:120px; height:160px; background:#EC0465; border-radius:60px 60px 60px 60px/100px 100px 60px 60px;}

2、半圆.lf-self-circle{ width:60px; height:120px; background:#EC0465; border-radius:60px 0 0 60px;}

4、花瓣.flower { width:120px; height:120px; background:#EC0465; border-radius:60px 60px 0 60px;}

6、椭圆.ty{ width:160px; height:100px; background:#EC0465; border-radius:80px/50px;}