html导航栏圆角,怎么实现css圆角？

圆角边框是css3新增属性，在圆角边框出现之前，前端开发有的采用整块的圆角图片作为背景，下面我们就来介绍一些css圆角的实现方法。

css3实现圆角边框：

css中可以使用border-radius属性设置圆角边框。border-radius 属性是一个最多可指定四个 border -*- radius 属性的复合属性。

圆角边框(border-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部分：

圆角边框

效果如图：

更多CSS3相关技术文章，请访问CSS3答疑栏目进行学习！