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

  1. 云栖社区>
  2. 博客>
  3. 正文

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

水车306 2015-07-06 12:07:00 浏览305
展开阅读全文

绘制一个圆角边框的示例

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

  

 

网友评论

登录后评论
0/500
评论
水车306
+ 关注