透明度圆角盒子

来源：互联网发布：北京seo教学编辑：程序博客网时间：2024/05/07 02:52

<!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" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<title>透明度圆角盒子</title>
<style type="text/css">
body { background:transparent url(http://imgsrc.baidu.com/forum/pic/item/c9f081cb192c9ae153664f59.jpg) center top no-repeat; padding:100px 200px 0; }
.style1 { padding:10px; font:bold 36px tahoma; color:yellow; }
.cglass { overflow:hidden; background:rgba(0,0,0,0.75); *background:rgb(0,0,0); filter:alpha(opacity=75); *zoom:1; padding:5px 10px; color:#fff; }

/* rcb5 | a */
.rcb5 .a1, .rcb5 .a2, .rcb5 .a3, .rcb5 .a4, .rcb5 .a5, .rcb5 .a6, .rcb5 .a7, .rcb5 .a8 { height:1px; font-size:0; overflow:hidden; display:block; }
.rcb5 .a1, .rcb5 .a8 { margin:0 5px;}
.rcb5 .a2, .rcb5 .a7 { margin:0 3px; border-right:2px solid transparent; border-left:2px solid transparent; }
.rcb5 .a3, .rcb5 .a6 { margin:0 2px; border-right:1px solid transparent; border-left:1px solid transparent; }
.rcb5 .a4, .rcb5 .a5 { margin:0 1px; border-right:1px solid transparent; border-left:1px solid transparent; height:2px; }
.rcb5 .a0 { border-right:1px solid transparent; border-left:1px solid transparent; *zoom:1; }
.cgCnt { position:relative; }
/* rcb5_G1 */
.rcb5_G1 .a2, .rcb5_G1 .a3, .rcb5_G1 .a4, .rcb5_G1 .a5, .rcb5_G1 .a6, .rcb5_G1 .a7, .rcb5_G1 .a0 { border-color:#030; background:#090; }
.rcb5_G1 .a1, .rcb5_G1 .a8 { background:#030; }
  /* rcb5_G1_cg */
  .rcb5_G1_cg .a2, .rcb5_G1_cg .a3, .rcb5_G1_cg .a4, .rcb5_G1_cg .a5, .rcb5_G1_cg .a6, .rcb5_G1_cg .a7, .rcb5_G1_cg .a0 { border-color:rgba(0,51,0,0.25); background:rgba(0,153,0,0.25); *filter:alpha(opacity=25); *zoom:1; }
  .rcb5_G1_cg .a1, .rcb5_G1_cg .a8 { background:rgba(0,51,0,0.25); *filter:alpha(opacity=25); *zoom:1; }
/* rcb5_G0 */
.rcb5_G0 .a2, .rcb5_G0 .a3, .rcb5_G0 .a4, .rcb5_G0 .a5, .rcb5_G0 .a6, .rcb5_G0 .a7, .rcb5_G0 .a0 { border-color:#090; background:#090; }
.rcb5_G0 .a1, .rcb5_G0 .a8 { background:#090; }
  /* rcb5_G0_cg */
  .rcb5_G0_cg .a2, .rcb5_G0_cg .a3, .rcb5_G0_cg .a4, .rcb5_G0_cg .a5, .rcb5_G0_cg .a6, .rcb5_G0_cg .a7, .rcb5_G0_cg .a0 { border-color:rgba(0,153,0,0); background:rgba(0,153,0,0.25); *filter:alpha(opacity=25); *zoom:1; }
  .rcb5_G0_cg .a1, .rcb5_G0_cg .a8 { background:rgba(0,153,0,0.25); *filter:alpha(opacity=25); *zoom:1; }

</style>
</head>
<body>

<h1 class="cglass">
<div class="cgCnt">Compatible with Firefox, IE, Chrome, etc.</div>
</h1>

<div class="rcb5 rcb5_G1">
<b class="a1"></b><b class="a2"></b><b class="a3"></b><b class="a4"></b>
<div class="a0"><div class="style1">Contents... 有边框，不透明</div></div>
<b class="a5"></b><b class="a6"></b><b class="a7"></b><b class="a8"></b>
</div>

<br />

<div class="rcb5 rcb5_G1 rcb5_G1_cg">
<b class="a1"></b><b class="a2"></b><b class="a3"></b><b class="a4"></b>
<div class="a0"><div class="cgCnt style1">Contents... 有边框，透明</div></div>
<b class="a5"></b><b class="a6"></b><b class="a7"></b><b class="a8"></b>
</div>

<br />

<div class="rcb5 rcb5_G0">
<b class="a1"></b><b class="a2"></b><b class="a3"></b><b class="a4"></b>
<div class="a0"><div class="style1">Contents... 无边框，不透明</div></div>
<b class="a5"></b><b class="a6"></b><b class="a7"></b><b class="a8"></b>
</div>

<br />

<div class="rcb5 rcb5_G0 rcb5_G0_cg">
<b class="a1"></b><b class="a2"></b><b class="a3"></b><b class="a4"></b>
<div class="a0"><div class="cgCnt style1">Contents... 无边框，透明</div></div>
<b class="a5"></b><b class="a6"></b><b class="a7"></b><b class="a8"></b>
</div>

</body>
</html>