用CSS实现DIV圆角样式

最新推荐文章于 2025-07-22 00:16:16 发布

转载最新推荐文章于 2025-07-22 00:16:16 发布 · 116 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/widestudy/archive/2009/08/07/1541330.html

文章标签：

#xhtml

本文介绍了一种不依赖图片而仅使用CSS来实现Div元素圆角效果的方法，通过巧妙地设置嵌套标签的边距和背景色，可以在不需要额外图片资源的情况下创建美观的圆角效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

网站中把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中查看如下图：