首页 > 北京网站制作 > css圆角代码 border-radius

css圆角代码 border-radius

发布-网页培训班 | 浏览量-

css圆角代码

 

/*css圆角代码*/
.rrtop, .rrbottom{display:block;}
.rrtop *, .rrbottom *{display:block; height:1px; overflow:hidden;}
.rr1{margin:0 4px; background:#DADADA}
.rr3{margin:0 2px; border-left:2px solid #DADADA; border-right:2px solid #DADADA;background-color:#fff;}
.rr4{margin:0 1px; height:2px; border-left:1px solid #DADADA; border-right:1px solid #DADADA;background-color:#fff;}
.rrbox {border-left:#ccc solid 1px; border-right:#DADADA solid 1px; background-color:#fff;overflow:auto;zoom:1;/*解决ie6下浮动后高度自适应问题*/}

页面代码:

    <b class="rrtop"><b class="rr1"></b><b class="rr3"></b><b class="rr4"></b></b>
    <div class="rrbox"> //内容 </div>
    <b class="rrbottom"><b class="rr4"></b><b class="rr3"></b><b class="rr1"></b></b>

 

手机端制作兼容火狐和chrome 浏览器

-moz(例如 -moz-border-radius)用于Firefox

-webkit(例如:-webkit-border-radius)用于Safari和Chrome。

例1

<div id="round"></div>

#round {

    padding:10px; width:300px; height:50px;

    border: 5px solid #dedede;

    -moz-border-radius: 15px;      /* Gecko browsers */

    -webkit-border-radius: 15px;   /* Webkit browsers */

    border-radius:15px;            /* W3C syntax */

}

 

例2:无边框

<div id="round"></div>  

#round {

    padding:10px; width:300px; height:50px;

    background:#FC9; 

    -moz-border-radius: 15px;

    -webkit-border-radius: 15px;

    border-radius:15px;

}

书写顺序

/* Gecko browsers */

-moz-border-radius: 5px; 

/* Webkit browsers */

-webkit-border-radius: 5px; 

/* W3C syntax - likely to be standard so use for future proofing */

border-radius:10px;

 

支持上、右、下、左

border-radius:5px 15px 20px 25px;

支持拆分书写

/* Gecko browsers */

-moz-border-radius-topleft: 20px;

-moz-border-radius-topright: 0;

-moz-border-radius-bottomleft: 0;

-moz-border-radius-bottomright: 20px;

 

/* Webkit browsers */

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

-webkit-border-top-right-radius: 0;

-webkit-border-bottom-left-radius: 0;

-webkit-border-bottom-right-radius: 20px;

 

/* W3C syntax */

border-top-left-radius: 20px;

border-top-right-radius: 0;

border-bottom-right-radius: 0;

border-bottom-left-radius:  20px;

display:block display:none display:inline-block 区别

CSS半透明兼容写法 css背景透明度代码

css常用代码大全

css渐变背景色代码 css3渐变色代码

css选择器 css3选择器优先级

css居中代码 css垂直居中代码 css 图片居中代码

 

 

 

原文地址:http://www.35ui.cn/post/20110816624.html

标签css网页培训班cssborder-radius

上一条: CSS文字首行缩进
下一条: access数据库压缩|access数据库体积压缩

  • 作品
  • 素材
  • ued
  • 资源
  • 前端工程师
  • Asp网页培训班
  • jquery培训班
  • 北京网站制作
  • logo设计培训班
  • 做网站常用代码