首页 > Web开发 > 详细

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

时间:2015-07-06 13:57:20      阅读:303      评论:0      收藏:0      [点我收藏+]

绘制一个圆角边框的示例

.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;
}

  

 

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

原文:http://www.cnblogs.com/xuange306/p/4624042.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!