标签：
第一种方法：如果是CSS2.2的话，可以简单写一个制作圆角矩形，分上中下裁成三张图
<title>CSS3实现圆角</title> <style type="text/css"> #box { width:200px; height:30px; background:url("../images/bt_bottom.jpg") no-repeat left bottom; } #box h1 { width:200px; height:20px; text-indent:-9999px; background:url("../images/bt_top.jpg") no-repeat left top; } /*下面这个是中间平铺的图，如果是纯色的话，可以直接写颜色值，也可以直接在上述box的背景上写上背景颜色*/ #box div#content { width:200px; height:200px; background:url("../images/bt_bg.jpg") repeat-y; } </style> </head> <body> <div id="box"> <h1>标题</h1> <div id="content"></div> </div> </body> </html>
第二种方法：如果是使用CSS实现圆角的话，那么目前最简单的方法就是CSS3中的-moz-border-radius、-webkit-border-radius以及border-radius一起使用效果更佳，目前能支持CSS3的浏览器有IE9及以上版本，google chrome10以上版本，firefox4及以上版本。否则的话，只能使用图片来进行实现了，当然也可以使用css2，但是那个太过于麻烦。
下面我给你一个例子，你可以在以上我提到的相应浏览器中进行浏览，那样效果会更好！
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>CSS3实现圆角</title> <style type="text/css"> .box { width:200px; height:200px; background:#09F; -moz-border-radius:8px;/*8px是圆角的角度，值越大则圆角效果越明显，如果修改此项，请修改以下两项的值，使之相同*/ -webkit-border-radius:8px; border-radius: 8px; } } </style> </head> <body> <div class="box"></div> </body> </html>
请将以上代码复制粘贴后，保存为html文档即可，然后利用目前最新版的浏览器进行浏览即可看到如下效果：
标签：
原文地址：http://www.cnblogs.com/SJP666/p/4678730.html
