主页 > 优化推广 > 一段自适应高度的圆角css矩形

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

发布时间：2011/4/1 13:25:25

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

上一篇： SQL Server 2000各种对象的最大值(数量或大小)

下一篇： SQL SERVER 企业管理器 MMC 无法创建管理单元

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

相关新闻推荐

石家庄网站建设的优点

竞价排名对SEO的影响

SEO网站优化的八个步骤