码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2015-07-06 14:00:29      阅读:147      评论: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
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!