职业IT人-IT人生活圈

 找回密码
 成为会员
搜索
查看: 637|回复: 10

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

[复制链接]
愚人 发表于 2011-6-22 09:43 | 显示全部楼层 |阅读模式

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> 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>  

<!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这个标记多放一个,也就是多一个象素的圆角出来了。
如果要拷到新的地方使用,只要像
Html代码  
/**另一种颜色*/   
.bb1{background: #B8E7B3;}/*边框线最外层背景颜色*/   
.bb2{background: #E7F9E3;border: #B8E7B3;}/*边框线的背景和边框线颜色*/   
.bb3{background: #E7F9E3;}/*标题背景颜色*/  

/**另一种颜色*/
.bb1{background: #B8E7B3;}/*边框线最外层背景颜色*/
.bb2{background: #E7F9E3;border: #B8E7B3;}/*边框线的背景和边框线颜色*/
.bb3{background: #E7F9E3;}/*标题背景颜色*/
这样添加一个样式就可以了。

谢谢大家关注补充一下:
Html代码  
.bb2{background: #E7F9E3;border: #B8E7B3;}/*边框线的背景和边框线颜色*/   
改成下面的,写处详细一点,FF就能显示了边框了,失误。   
.bb2{background: #E7F9E3;border-left-color: #B8E7B3;border-right-color: #B8E7B3;}/*边框线的背景和边框线颜色*/  

.bb2{background: #E7F9E3;border: #B8E7B3;}/*边框线的背景和边框线颜色*/
改成下面的,写处详细一点,FF就能显示了边框了,失误。
.bb2{background: #E7F9E3;border-left-color: #B8E7B3;border-right-color: #B8E7B3;}/*边框线的背景和边框线颜色*/

相关帖子

叫我小乖 发表于 2011-6-22 09:43 | 显示全部楼层
通用不?在各个浏览器上实验过?

fossil 发表于 2011-6-22 09:43 | 显示全部楼层
我测了一下,在chrome,firefox,ie8都可以的.

走失的猫咪 发表于 2011-6-22 09:43 | 显示全部楼层
测试通过。。。还算不错。。。

走失的猫咪 发表于 2011-6-22 09:44 | 显示全部楼层
IE6/7/8、Chrome5、Firefox3.6、opera10.5测试正常,以后都用这个。

钰云 发表于 2011-6-22 09:44 | 显示全部楼层
不过我觉得代码还可以在优化,尽量控制到人性化,当前构造圆角的代码似乎不是很好。

Jethro 发表于 2011-6-22 09:44 | 显示全部楼层
原生态啊,可以可以封装成一个什么插件来用!!!!

broken 发表于 2011-6-22 09:45 | 显示全部楼层
灰常神奇!
ff下第二个图片左右竖线没显示出来,但已经很不错了!

紫衿 发表于 2011-6-22 09:45 | 显示全部楼层
jquery 把所有的b都appand上去就不会少写b了

走就走吧 发表于 2011-6-22 09:45 | 显示全部楼层
远程连接   


郁闷小男人 发表于 2011-8-18 13:38 | 显示全部楼层
要相信自己~智商为0
您需要登录后才可以回帖 登录 | 成为会员

本版积分规则

QQ|手机版|小黑屋|网站帮助|职业IT人-IT人生活圈 ( 粤ICP备12053935号-1 )|网站地图
本站文章版权归原发布者及原出处所有。内容为作者个人观点,并不代表本站赞同其观点和对其真实性负责,本站只提供参考并不构成任何投资及应用建议。本站是信息平台,网站上部分文章为转载,并不用于任何商业目的,我们已经尽可能的对作者和来源进行了通告,但是能力有限或疏忽造成漏登,请及时联系我们,我们将根据著作权人的要求立即更正或者删除有关内容。

GMT+8, 2024-3-28 21:07 , Processed in 0.129456 second(s), 24 queries , Gzip On.

Powered by Discuz! X3.4

Copyright © 2001-2021, Tencent Cloud.

快速回复 返回顶部 返回列表