第一种方法：如果是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文档即可，然后利用目前最新版的浏览器进行浏览即可看到如下效果：
时间： 2024-08-10 04:26:11