[分享]css3圆角图

CSS3圆角是CSS3的一个很实用的特性，它可以让我们制作出各种漂亮的圆角图形，无需使用图片制作，代码也非常简单。下面是一个简单的CSS3圆角示例：.box{ width: 200px; height...

CSS3圆角是CSS3的一个很实用的特性，它可以让我们制作出各种漂亮的圆角图形，无需使用图片制作，代码也非常简单。下面是一个简单的CSS3圆角示例：

.box{
    width: 200px;
    height: 200px;
    background-color: #f3f3f3;
    border-radius: 20px;
} 

上面的代码是一个简单的DIV容器，它应用了一个20像素的圆角，效果是一个圆角框。在这里，border-radius属性是关键，它可以控制圆角的大小。我们可以通过设置不同的border-radius值来制作不同圆角大小和形状的图形。

除了简单的圆角，CSS3还支持复杂的圆角图形，例如椭圆形、斜角、不对称圆角等。下面是一个例子：

.box{
    width: 200px;
    height: 100px;
    background-color: #f3f3f3;
    border-top-left-radius: 20px;
    border-top-right-radius: 80px;
    border-bottom-left-radius: 80px;
    border-bottom-right-radius: 20px;
} 

上面的代码制作了一个不对称的圆角矩形，上左、上右、下左、下右四个圆角的大小不同，从而产生了一个特殊的形状。我们可以通过设置不同的border-radius属性值，来制作出各种不同的圆角图形。

总的来说，CSS3圆角是一个十分实用的CSS特性，它可以帮助我们制作各种漂亮的圆角图形，而且代码非常简单。如果你还未尝试过，不妨开始学习一下吧。