html的圆角效果,css实现圆角效果总结

有棱有角的方框给人一种整齐严谨的感觉，如果把方框的角改成圆角，则会给人舒服柔和的感受。如果你看不惯Div+Css布局中的一生硬的边框，大可将其改成圆角的。具体如何实现呢？

综观网上的方法，大概有以下几种：

利用块对象堆砌。一般是用b标签。

利用背景图像定位遮挡四个角。

使用javascript来处理。

第一种方法实例：

＜html＞

＜head＞

＜title＞CSS圆角效果＜/title＞

＜meta http-equiv="content-type" content="text/html; charset=gb2312"＞

＜style type="text/CSS"＞

div.RoundedCorner{background: #9BD1FA}

b.rtop, b.rbottom{display:block;background: #FFF}

b.rtop b, b.rbottom b

{display:block;height: 1px;overflow: hidden; background: #9BD1FA}

b.r1{margin: 0 5px}

b.r2{margin: 0 3px}

b.r3{margin: 0 2px}

b.rtop b.r4, b.rbottom b.r4{margin: 0 1px;height: 2px}

＜/style＞

＜/head＞

＜body＞

＜div class="RoundedCorner"＞

＜b class="rtop"＞＜b class="r1"＞＜/b＞＜b class="r2"＞＜/b＞＜b class="r3"＞＜/b＞＜b class="r4"＞＜/b＞＜/b＞

＜br＞无图片实现圆角框＜br＞＜br＞

＜b class="rbottom"＞＜b class="r4"＞＜/b＞＜b class="r3"＞＜/b＞＜b class="r2"＞＜/b＞＜b class="r1"＞＜/b＞＜/b＞

＜/div＞

＜/body＞

＜/html＞

将上面的代码保存成html格式的文档，用浏览器打开即可看到效果。个人觉得用堆砌的方法来达到这种效果有点牵强。如果你觉得手写比较麻烦的话，SPIFFYCORNERS网站可以在线生成这种形式的圆角。

第二种方法实例：

现在的“百度知道”风格就是一个很好的例子了。主要原理是将外层Div的css定义为position:relative，然后在这个层里面放四个小Div，两个在内容的开始之前，两个在内容的末尾之后。固定长、宽，并定义css为position:absolute，使其固定在四个角的位置。这四个div的背景都用同一个图像，但使用图像的定位方式使其只显示其中一部分，就达到你现在看到的效果了。

但是要注意一点：在IE6以下的浏览器中，父容器需要设置宽度才使定位有效，宽度可以是百分比，或某单位长度。如果你需要宽度是可变的，那么就不要用这种定位方法，而是尽量使用HTML中原有内容对象来作为背景图像的载体，这需要有一定的技巧，有点复杂，具体可以看看无懈可击的CSS圆角技术。

第三种方法：

用javascript来实现。个人觉得网页中能不使用的js的话就尽量不使用，不提倡使用这种方法。但可以了解一下：用glossy.js为你的web图片添加3D圆角，这种只在IE6、IE7中有效，是针对图像的处理。js简单实现div圆角等等，可以到网上搜索一下，在此不详述。