可变兼容性好的圆角 -

vincent_com

浏览: 42011 次
性别:
来自: 上海

最近访客更多访客>>

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

可变兼容性好的圆角

博客分类：

javascript

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>  
  <title> New XHTML Document </title>  
  <meta http-equiv="Content-Type" content="text/html; charset=gbk" />   
  <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;}/*边框线的背景和边框线颜色*/  
.bb2的改成下面的 ，FF就能显示了边框了，  
.bb2{background: #E7F9E3;border-left-color: #B8E7B3;border-right-color: #B8E7B3;}/*边框线的背景和边框线颜色*/  
.bb3{background: #E7F9E3;}/*标题背景颜色*/

分享到：