|
锁定老帖子 主题：DIV不用图片做可变可到处用的圆角
精华帖 (0) :: 良好帖 (16) :: 新手帖 (1) :: 隐藏帖 (0)
|
|
|---|---|
| 作者 | 正文 |
|
发表时间：2010-03-09
最后修改：2010-03-15
<!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> New XHTML Document </title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="generator" content="editplus" />
<meta name="author" content="cjx" />
<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-left-color: #B8E7B3;border-right-color: #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这个标记多放一个，也就是多一个象素的圆角出来了。 如果要拷到新的地方使用，只要像 /**另一种颜色*/
.bb1{background: #B8E7B3;}/*边框线最外层背景颜色*/
.bb2{background: #E7F9E3;border: #B8E7B3;}/*边框线的背景和边框线颜色*/
.bb3{background: #E7F9E3;}/*标题背景颜色*/
这样添加一个样式就可以了。
谢谢大家关注补充一下： .bb2{background: #E7F9E3;border: #B8E7B3;}/*边框线的背景和边框线颜色*/
改成下面的，写处详细一点，FF就能显示了边框了，失误。
.bb2{background: #E7F9E3;border-left-color: #B8E7B3;border-right-color: #B8E7B3;}/*边框线的背景和边框线颜色*/
声明：ITeye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
推荐链接
|
| 返回顶楼 | |
|
发表时间：2010-03-12
通用不？在各个浏览器上实验过？
|
| 返回顶楼 | |
|
发表时间：2010-03-12
我测了一下,在chrome,firefox,ie8都可以的.
|
| 返回顶楼 | |
|
发表时间：2010-03-12
测试通过。。。还算不错。。。
|
| 返回顶楼 | |
|
发表时间：2010-03-12
IE6/7/8、Chrome5、Firefox3.6、opera10.5测试正常，以后都用这个。
|
| 返回顶楼 | |
|
发表时间：2010-03-13
不过我觉得代码还可以在优化，尽量控制到人性化，当前构造圆角的代码似乎不是很好。
|
| 返回顶楼 | |
|
发表时间：2010-03-14
原生态啊,可以可以封装成一个什么插件来用!!!!
|
| 返回顶楼 | |
|
发表时间：2010-03-15
灰常神奇！
ff下第二个图片左右竖线没显示出来，但已经很不错了！ 
|
| 返回顶楼 | |
|
发表时间：2010-03-15
jquery 把所有的b都appand上去就不会少写b了
|
| 返回顶楼 | |
|
发表时间：2010-03-15
远程连接 http://happysoul.iteye.com/blog/591785 当初做的就是没调颜色
|
| 返回顶楼 | |
