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 图片居中代码

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