div css 圆角样式

最新推荐文章于 2023-03-24 10:16:19 发布

iteye_5904

最新推荐文章于 2023-03-24 10:16:19 发布

阅读量227

点赞数

分类专栏： Div / Css / XML / HTML5 文章标签： CSS XHTML HTML

Div / Css / XML / HTML5 专栏收录该内容

177 篇文章 1 订阅

订阅专栏

代码：

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title> 圆角样式 </title>

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

/**另一种样式*/
.c41 {height: 1px; font-size: 1px; overflow: hidden; display: block; background: #B2D0EA; margin: 0 5px;}
.c42 {height: 1px; font-size: 1px; overflow: hidden; display: block; background: #EDF7FF; border-right: 2px solid #B2D0EA; border-left: 2px solid #B2D0EA; margin: 0 3px; clear:both;}
.c43 {height: 1px; font-size: 1px; overflow: hidden; display: block; background: #EDF7FF; border-right: 1px solid #B2D0EA; border-left: 1px solid #B2D0EA; margin: 0 2px; clear:both;}
.c44 {height: 2px; 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="c41"></b> <b class="c42"></b> <b class="c43"></b> <b class="c44"></b>

  <div class="bc">
	<div class="bt ">标题</div>
	<div class="bb">第二种样式</div>
  </div>

  <b class="c44"></b> <b class="c43"></b> <b class="c42"></b> <b class="c41"></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>