DIV不用图片做可变可到处用的圆角

最新推荐文章于 2024-03-06 16:46:02 发布

iteye_6934

最新推荐文章于 2024-03-06 16:46:02 发布

阅读量134

点赞数

分类专栏： css 文章标签： XHTML HTML

css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

http://www.iteye.com/topic/610962

样例，上面是两个圆角Box。
Html代码
<!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>
<title> 圆角样式 </title>
<meta name="generator" content="editplus" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<style type="text/css">
.b1 {height: 1px; font-size: 1px; overflow: hidden; display: block; background: #B2D0EA; margin: 0 3px; clear:both;}
.b2 {height: 1px; font-size: 1px; overflow: hidden; display: block; background: #EDF7FF; border-right: 2px solid #B2D0EA; border-left: 2px solid #B2D0EA; margin: 0 1px; clear:both;}
.b3 {height: 1px; font-size: 1px; overflow: hidden; display: block; background: #EDF7FF; border-right: 1px solid #B2D0EA; border-left: 1px solid #B2D0EA; margin: 0 1px; clear:both;}

.bc {font-size: 12px; overflow: hidden; display: block; background: #EDF7FF; border-right: 1px solid #B2D0EA; border-left: 1px solid #B2D0EA; margin: 0 0px; clear:both;}
.bt {background: #EDF7FF;margin:0 2px;padding:5px;}
.bb {background: #FFFFFF;margin:0 2px;padding:5px;}

/**另一种颜色*/
.bb1{background: #B8E7B3;}/*边框线最外层背景颜色*/
.bb2{background: #E7F9E3;border: #B8E7B3;}/*边框线的背景和边框线颜色*/
.bb3{background: #E7F9E3;}/*标题背景颜色*/
</style>

</head>

<body>

<b class="b1"></b><b class="b2"></b><b class="b3"></b>
<div class="bc">
<div class="bt ">标题</div>
<div class="bb">
圆角三边这里是内容
</div>
</div>
<b class="b3"></b><b class="b2"></b><b class="b1"></b>
<hr/>
<b class="b1 bb1"></b><b class="b2 bb2"></b><b class="b3 bb2"></b>
<div class="bc bb2">
<div class="bt bb3">另一种颜色</div>
<div class="bb">
另一种颜色这里是内容
</div>
</div>
<b class="b3 bb2"></b><b class="b2 bb2"></b><b class="b1 bb1"></b>

</body>
</html>
这里是三个厚度的圆角，如果需要再圆角大一点，b这个标记多放一个，也就是多一个象素的圆角出来了。
如果要拷到新的地方使用，只要像
Html代码
/**另一种颜色*/
.bb1{background: #B8E7B3;}/*边框线最外层背景颜色*/
.bb2{background: #E7F9E3;border: #B8E7B3;}/*边框线的背景和边框线颜色*/
.bb3{background: #E7F9E3;}/*标题背景颜色*/
这样添加一个样式就可以了。

iteye_6934

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DIV不用图片做可变可到处用的圆角

http://www.iteye.com/topic/610962 样例，上面是两个圆角Box。Html代码圆角样式 .b1 {height: 1px; font-size: 1px; overflow: hidden; display: block; background...
复制链接

扫一扫

专栏目录