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=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这个标记多放一个,也就是多一个象

素的圆角出来了。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值