用CSS实现DIV圆角样式

网站中把Div处理成圆角样式可以增加用户体验，看上去会更美观，现介绍一种实现方法，代码如下

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
div.rc{
 /*要进行圆角处理的div背景色*/
 background:#F36;
}
b.rctop,b.rcbottom{
 /*圆角的颜色，要与其父容器的背景色相一至*/
 display:block;
 background:#FFF;
}
b.rctop b,b.rcbottom b{
 /*其背景色最好与进行圆角处理的div背景色相一至*/
 display:block;
 height:1px;
 overflow:hidden;
 background:#F36;
}
b.rc1{
 margin:0 5px;
}
b.rc2{
 margin:0 3px;
}
b.rc3{
 margin:0 2px;
}
b.rctop b.rc4,b.rcbottom b.rc4{
 margin:0 1px;
 height:3px;
}
</style>
</head>

<body>
<div class="rc">
<b class="rctop"><b class="rc1"></b><b class="rc2"></b><b class="rc3"></b><b class="rc4"></b></b>
图片圆角处理
<b class="rcbottom"><b class="rc4"></b><b class="rc3"></b><b class="rc2"></b><b class="rc1"></b></b>
</div>
</body>
</html>

将上面的代码保存为html文件，在IE中查看如下图：


posted @ 2009-08-07 16:38  收音机  阅读(1557)  评论(0)    收藏  举报