代码改变世界

纯css实现圆角

2012-03-13 11:47  滴水成兵  阅读(357)  评论(0)  编辑  收藏  举报

其实用纯css实现圆角的方法有不少，这里我是通过对元素border的操作来实现防圆角，圆弧如果太大效果可能就不是太好了，废话不多说直接上代码吧：

css部分

.box{display:inline-block;}
.top{border-bottom:3px solid; border-top-color:#cc0000; border-bottom-color:#cc0000; border-left:3px dotted transparent; border-right:3px dotted transparent;}
.center{padding:10px 20px; color:white; font-size:14px; background:#cc0000;}
.bot{border-top:3px solid; border-top-color:#cc0000; border-bottom-color:#cccccc; border-left:3px dotted transparent; border-right:3px dotted transparent;}

html部分　　

<div class="box">
    <div class="top"></div>
    <div class="center">我是一只小小鸟、小小鸟！你也是？你也是？</div>
    <div class="bot"></div>
</div>

效果如下：