纯代码实现CSS圆⾓我这⾥说的是纯代码，是指的不使⽤图⽚实现圆⾓，图⽚实现圆⾓，这⾥就不说了。
纯代码实现圆⾓主要有3种⽅法：
第⼀种：CSS3圆⾓
#chaomao{
border-radius:2px 2px 2px 2px;
}
上⾯代码的意思是左上、右上、右下、右下分别2px的圆⾓
当然也可以简写：border-radius:2px
⽅向是从左上到左下逆时针
也可以分别指定
#chaomao{
border-top-left-radius:4px 2px;
border-top-right-radius:3px 4px;
border-bottom-right-radius:6px 2px;
border-bottom-left-radius:3px 4px;
}
意思很简明
⽕狐等浏览器也⽀持⾃⼰的私有圆⾓属性
Firefox⽀持border-radius(圆⾓)：-moz-border-radius:2px
webkit内核的Safari和Chrome⽀持border-radius(圆⾓)：-webkit-border-radius:2px
Opera⽀持border-radius(圆⾓)：border-radius:2px
CSS3实现圆⾓最简单了，可惜IE6-8不⽀持
第⼆种：⽤CSS+html代码
百度知道的⾸页圆⾓就是⽤这种⽅法实现的
有点：兼容所有浏览器，
缺点：需要添加额外的HTML标签，维护⽐较⿇烦
实现原理是利⽤多个空层，上⾯⼀层⽐下⾯少1px，从⽽使边⾓看起来是⼀个圆弧状HTML代码：
<div>
<strong class="b1"></strong>
<strong class="b2"></strong>
<strong class="b3"></strong>
<strong class="b4"></strong>
<div class="content">⽂字内容</div>
</div>
CSS代码
cssclass属性
b1,.b2,.b3,.b4,.b5,.b6,.b7,.b8{
height:1px;
font-size:1px;
overflow:hidden;
display:block;
}
.b1,.b8{
margin:0 5px;
}
.
b2,.b7{
margin:0 3px;
border-right:2px solid;
border-left:2px solid;
}
.b3,.b6{
margin:0 2px;
border-right:1px solid;
border-left:1px solid;
}
.b4,.b5{
margin:0 1px;
border-right:1px solid;
border-left:1px solid;
height:2px;
}
第三种：利⽤jQuery圆⾓插件代码实现圆⾓
优点：兼容所有浏览器
缺点：需要使⽤jQuery插件
这是⼀个jQuery插件，使⽤的时候，需要jQuery⽂件⼀起，使⽤⽅法很简单$("#chaomao").corner("5px")
它就实现了id值问哦chaomao的元素，5px的圆⾓

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。