css3圆角怎么进行一个设置

代码编辑器

浏览器

将图片和文件准备好如果需要对图片进行设置的话，就准备，不需要的话就不需要单独进行准备了，我们在写的时候，根据具体情况判断。其中圆角主要是利用到css3中的border-radius属性。

有背景色的的边框圆角代码写法：具体样式如下：.test001 {padding: 20px;width:200px;height:150px;line-height:150px;text-align:center; color:#fff;border-radius:25px;background:#f00;  }如果我们需要修改圆角的角度大小，只需要修改border-radius的属性值就好。

有背景图的的边框圆角代码写法：具体样式如下：.test002 {border-radius:25px;background:url(static/images/xin.jpg) center repeat;  padding:20px;width:200px;height: 150px;}背景图主要利用background来进行一个设置，。特别注意的事，我们需要对背景图片的地址进行一个准确引用。如果路劲错误，图片会不显示出来。

只显示边框的的的圆角代码写法：具体样式如下：.test003 {padding:20px;width:200px;height:150px;border-radius:25px;border:2px solid #f00;}我们需要利用border对边框进行一个设置。

对四边进行一个设置，具体央视代码如下：.test004 {border-radius:15px 50px 30px 5px;background:#8AC007;padding:20px;width:200px; height:150px;}

对对边进行一个设置，具体央视代码如下：.test005 {border-radius:15px 50px 30px;background:#8AC007;padding:20px;width:200px;height: 150px;}

对同一边进行一个设置，具体央视代码如下：.test006{border-radius: 15px 50px;  background: #8AC007;  padding: 20px;  width: 200px;  height: 150px;}