一段自适应高度的圆角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>
[声明]本网转载网络媒体稿件是为了传播更多的信息，此类稿件不代表本网观点，本网不承担此类稿件侵权行为的连带责任。故此，如果您发现本网站的内容侵犯了您的版权，请您的相关内容发至此邮箱【27535611@qq.com】，我们在确认后，会立即删除，保证您的版权。