一段自适应高度的圆角css矩形

作者: 浏览: 发布日期:2011-04-01
[导读]:

一段自适应高度的圆角css矩形 - 天空下的缘分 - 天空下的缘分
 

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>自适应圆角做法</title>

<style type="text/css">

#xsnazzy h1, #xsnazzy h2, #xsnazzy p {margin:0 10px; letter-

spacing:1px;}

#xsnazzy h1 {font-size:2.5em; color:#fff;}

#xsnazzy h2 {font-size:2em;color:#06a; border:0;}

#xsnazzy p {padding-bottom:0.5em;}

#xsnazzy h2 {padding-top:0.5em;}

#xsnazzy {background: transparent; margin:1em;}

.xtop, .xbottom {display:block; background:transparent; font-size:1px;}

.xb1, .xb2, .xb3, .xb4 {display:block; overflow:hidden;}

.xb1, .xb2, .xb3 {height:1px;}

.xb2, .xb3, .xb4 {background:#ccc; border-left:1px solid #08c; border-

right:1px solid #08c;}

.xb1 {margin:0 5px; background:#08c;}

.xb2 {margin:0 3px; border-width:0 2px;}

.xb3 {margin:0 2px;}

.xb4 {height:2px; margin:0 1px;}

.xboxcontent {display:block; background:#ccc; border:0 solid #08c;

border-width:0 1px;}

</style>

</head>

<body>

<div id="xsnazzy">

<b class="xtop"><b class="xb1"></b><b class="xb2"></b><b

class="xb3"></b><b class="xb4"></b></b>

<div class="xboxcontent">

<h1>自适应圆角</h1>

<p>QQ:515487148<br />http://www.tianyuhao.com</p>

<h2>这就是我</h2>

<p>Lorem ipsum dolor sitamet, consectetuer adipiscing elit, sed diam

nonummy nibh

  euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut

wisi enim

  ad minim veniam, quis nostrud exerci tation ullamcorper suscipit

lobortis nisl

  ut aliquip ex ea commodo consequat.</p>

<p>Duis autem vel eum iriure dolor in hendrerit

  in vulputate velit esse molestie consequat, vel illum dolore eu

feugiat nulla

  facilisis at vero eros et accumsan et iusto odio dignissim qui

blandit praesent

  luptatum zzril delenit augue duis dolore te feugait nulla

facilisi.</p>

  <p>Duis autem vel eum iriure dolor in hendrerit

  in vulputate velit esse molestie consequat, vel illum dolore eu

feugiat nulla

  facilisis at vero eros et accumsan et iusto odio dignissim qui

blandit praesent

  luptatum zzril delenit augue duis dolore te feugait nulla

facilisi.</p>

  <p>Duis autem vel eum iriure dolor in hendrerit

  in vulputate velit esse molestie consequat, vel illum dolore eu

feugiat nulla

  facilisis at vero eros et accumsan et iusto odio dignissim qui

blandit praesent

  luptatum zzril delenit augue duis dolore te feugait nulla

facilisi.</p>

</div>

<b class="xbottom"><b class="xb4"></b><b class="xb3"></b><b

class="xb2"></b><b class="xb1"></b></b>

</div>

</body>

</html>


免责声明:本文来源于网络,版权归原作者所有,仅供大家共同分享学习,如作者认为涉及侵权,请与我们联系,我们核实后立即删除。本站地址:http://www.sjz2.cn/news/show-726.html
请填写下方表单,我们会尽快与您联系
感谢您的咨询,我们会尽快给您回复!