css3如何实现圆角边框

1.圆角边框（border-raus）的基本用法：

圆角边框的最基本用法就是设置四个相同弧度的圆角

boder-top-left-radius：30px；//左上角

boder-top-right-radius：30px；//右上角

boder-bottom-left-radius：30px；//右下角

boder-bottom-right-radius：30px；//左下角

如果这四个弧度的圆角相同，可以写成：

border-radius：30px；

例子：

css部分：

.div1{

margin:0auto;

background:darkcyan;

width:200px;

height:200px;

border:2pxsoliddarkslategray;

border-radius:30px;

text-align:center;

line-height:200px;

}

html部分：

圆角边框

效果如图：

2.圆角边框也可以使用百分比作为单位，比如：将一个正方形的圆角边框设置为50%，那么就会形成一个圆，不过使用百分比与像素并不能等效。

注意：百分比大于50%后，形状就不会再变化了，圆角的半径不能超过宽/高的一半

例子：

css部分：

.box1{

width:200px;

height:200px;

margin:30pxauto;

border:2pxsolid#e4007e;

text-align:center;

line-height:200px;

font-weight:bold;

font-size:24px;

background:burlywood;

border-raus:50%;//圆角百分比

}

html部分：

这是一个圆

效果如图:

3.既然使用圆角边框可以绘制出一个圆，同样也可以绘制出一个椭圆。

例子：

css部分：

.box2{

width:200px;

height:300px;

margin:30pxauto;

border:2pxsolid#e4007e;

text-align:center;

line-height:200px;

font-weight:bold;

font-size:24px;

background:burlywood;

border-raus:100px/150px;

}

html部分：

这是一个椭圆

效果如图：

4.设置不同弧度的圆角

例子：

css部分：

#box4{

width:500px;

position:relative;

margin:30pxauto;

}

.v4,.div5,.div6,.div7{

width:200px;

height:200px;

text-align:center;

color:seagreen;

font-size:26px;

line-height:200px;

background:yellowgreen;

border:2pxsoliddarkslategray;

float:left;

margin:20px;

}

.div4{border-top-left-radius:40px;}

.div5{border-top-right-radius:20px;}

.div6{border-bottom-left-radius:30px;}

.div7{border-bottom-right-radius:10px;}

HTML部分：

左上角为圆角

右上角为圆角

右下角为圆角

左下角为圆角

效果如图：

5.注意，上面例子中，每句圆角边框代码都要单独编写兼容代码。

兼容性代码要这样写：

.div4{

border-top-left-radius:40px;

-moz-border-top-left-radius:40px;

-webkit-border-top-left-radius:40px;

}

如图，图中用的是Chrome浏览器

目前，ie9+支持border-radius属性，Firefox、Chrome、Safari支持所有新的边框属性