css3如何实现圆角边框

圆角边框是css3新增属性，在圆角边框出现之前，前端开发有的采用整块的圆角图片作为背景，有的采用小的圆角图片分别放在元素的四角，非常麻烦，灵活性差，也达到降低了网站的整体性能，而圆角边的出现则降低了开发和维护的难度。

css3实现圆角边框

圆角边框（boder-radius）的基本用法：

圆角边框的最基本用法就是设置四个相同弧度的圆角

boder-top-left-radius：30px；      //左上角

boder-top-right-radius：30px；   //右上角

boder-bottom-left-radius：30px；  //右下角

boder-bottom-right-radius：30px； //左下角

　　

如果这四个弧度的圆角相同，可以写成：

border-radius：30px；

　　

例子：

css部分：

.div1{

            margin:0 auto;

            background: darkcyan;

            width:200px;

            height:200px;

            border:2px solid darkslategray;

            border-radius:30px;

            text-align: center;

            line-height: 200px;

        }

　　

html部分：

 <div class="div1">圆角边框</div>

　　

效果如图：