css3圆角的初步理解

学习css3圆角首先我们已经经过边框属性的学习进行更深层次的学习
用 CSS3，你可以创建圆角边框，添加阴影框，并作为边界的形象而不使用设计程序
我们将在接下来认识以下新的圆角属性

border-radius 所有四个边角 border---radius 属性的缩写
border-top-left-radius 定义了左上角的弧度
border-top-right-radius 定义了右上角的弧度
border-bottom-right-radius 定义了右下角的弧度
border-bottom-left-radius 定义了左下角的弧度

学习圆角之前我们得先学习
在css3中对于创建圆相对于以前来说更加容易
接下来我用div创建一个圆
实例

div
{
border:2px solid;
border-radius:25px;
}

我们可以对圆进行不同的属性设置
实例

#rcorners4 {
    border-radius: 15px 50px 30px 5px;
    background: #8AC007;
    padding: 20px;
    width: 200px;
    height: 150px;
}

#rcorners5 {
    border-radius: 15px 50px 30px;
    background: #8AC007;
    padding: 20px;
    width: 200px;
    height: 150px;
}

#rcorners6 {
    border-radius: 15px 50px;
    background: #8AC007;
    padding: 20px;
    width: 200px;
    height: 150px;
}

我们还可以创建椭圆边角
如下

#rcorners7 {
    border-radius: 50px/15px;
    background: #8AC007;
    padding: 20px;
    width: 200px;
    height: 150px;
}

#rcorners8 {
    border-radius: 15px/50px;
    background: #8AC007;
    padding: 20px;
    width: 200px;
    height: 150px;
}

#rcorners9 {
    border-radius: 50%;
    background: #8AC007;
    padding: 20px;
    width: 200px;
    height: 150px;
}

我的理解就到现在结束了