css3学习总结2--CSS3圆角边框

绘制一个圆角边框的示例

.div{
　　border: solid 5px blue;
　　border-radius: 20px;
　　-moz-border-radius:20px;
　　-o-border-radius: 20px;
　　-webkit-border-radius:20px;
　　background-color:skyblue;
　　padding:20px;
　　width:180px;
}

　　在示例中具有一个div元素，使用border-radius属性将其边框绘制为圆角边框，圆角半径为20像素，边框颜色为蓝色，div元素背景色为浅蓝色。

 

border-radius中指定两个半径

.wrap {
　　border: solid 5px blue;
　　border-radius: 40px 20px;
　　-moz-border-radius:40px 20px;
　　-o-border-radius:40px 20px;
　　-webkit-border-radius:40px 20px;
　　background-color:skyblue;
　　padding:20px;
　　width:180px;
}

　

不显示边框

在CSS3中，如果使用了border-radius属性但是把边框设定为不显示的时候，浏览器将把背景的四个角绘制为圆角。

修改边框种类

使用了border-radius属性后，不管边框是什么种类，都会将边框沿着圆角曲线进行绘制。

绘制四个角不同半径的圆角边框

如果要绘制的圆角边框四个角半径各不相同，可以将border-top-left-radius属性、border-top-right-radius属性、border-bottom-right-radius属性、border-bottom-left-radius属性结合起来使用。

示例：

.wrap {
   border: solid 5px blue;
　　border-radius-topleft:10px;
　　border-radius-topright:20px;
　　border-radius-bottomright:30px;
　　border-radius-bottomleft:40px;
　　-moz-border-radius-topleft:10px;
　　-moz-border-radius-topright:20px;
　　-moz-border-radius-bottomright:30px;
　　-moz-border-radius-bottomleft:40px;
　　-o-border-radius-topleft:10px;
　　-o-border-radius-topright:20px;
　　-o-border-radius-bottomright:30px;
　　-o-border-radius-bottomleft:40px;
　　-webkit-border-top-left-radius:10px;
　　-webkit-border-top-right-radius:20px;
　　-webkit-border-bottom-right-radius:30px;
　　-webkit-border-bottom-left-radius:40px;
   background-color:skyblue;
   padding:20px;
   width:180px;
}