一段自适应高度的圆角css矩形
来源:互联网 发布:linux服务器开发 陈硕 编辑:程序博客网 时间:2024/06/05 15: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=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>Snazzy Borders</h1>
- <p>Based on Nifty Corners By Alessandro Fulciniti<br />http://pro.html.it/esempio/nifty/</p>
- <h2>Rounded borders without images</h2>
- <p>Lorem ipsum dolor sit amet, 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>
一段自适应高度的圆角css矩形,兼容ie和ff
- 一段自适应高度的圆角css矩形
- css-高度自适应的问题
- css高度自适应的问题
- CSS布局:自适应高度的CSS布局
- CSS布局:自适应高度的CSS布局
- CSS实例(八):不用图片实现宽度、高度自定的圆角矩形
- 纯CSS技术实现可变高度的圆角矩形框-so easy
- 自适应高度的一个遮罩层css
- 关于div自适应高度的 css
- css实现iframe的高度自适应
- css 高度自适应的九宫格效果
- css 高度自适应问题
- CSS实现高度自适应
- CSS高度自适应问题
- div css高度自适应
- div+css自适应高度
- CSS高度自适应
- css自适应高度
- 网页切图过程中div+css命名规则
- 用多活动结果集优化ADO.NET2.0数据连接
- 能嗅出程序的味道来
- 多重背包问题
- ASP.NET学习-2008.12.5
- 一段自适应高度的圆角css矩形
- regsvr32
- Lamada 表达式(C# 3.0)
- FC10如何用root登录
- FCKeditor在asp.net 下的配置
- WinForms的鼠标事件和使用GDI+的使用
- RH linux As4下安装irc服务器ircd-hybrid-7.2.3
- wince手写输入法以及软键盘拼音输入法的问题
- 开发收藏夹