查看: 636|回复: 8

CSS圆角实例 [复制链接]

admin

管理员

Rank: 9 Rank: 9 Rank: 9

TA的每日心情

	无聊 2025-5-27 03:37:20

签到天数: 366 天

[LV.9]以坛为家II

我玩的应用:

电梯直达

楼主

发表于 2011-8-9 04:28:45 |只看该作者 |倒序浏览

<!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" lang="UTF-8">
<head>
<meta name="keywords" content="CSS网页布局,DivCSS教程,CSS Web Design" />
<meta name="description" content="我爱CSS,www.52CSS.com.致力于Web标准在中国的应用及发展,学习CSS网页布局首选站点,超多教程与实例,为您的开发提供参考." />
<title>CSS圆角边框</title>
</head>
<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>
<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>
</div>
<b class="xbottom"><b class="xb4"></b><b class="xb3"></b><b class="xb2"></b><b class="xb1"></b></b>
</div>
</body>
</html>

分享到: QQ空间 腾讯微博 腾讯朋友

分享0 收藏0 支持0 反对0 分享到人人 转发到微博

[img=http://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&email=fRUcHhYWGAQ9GxIFEBwUEVMeEhA]http://rescdn.qqmail.com/zh_CN/htmledition/images/function/qm_open/ico_mailme_02.png[/img]

使用道具举报

admin

管理员

Rank: 9 Rank: 9 Rank: 9

TA的每日心情

	无聊 2025-5-27 03:37:20

签到天数: 366 天

[LV.9]以坛为家II

沙发

发表于 2011-8-9 04:55:25 |只看该作者

<!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" />
<title>无图片CSS圆角的五个实例 - www.52css.com</title>
<style type="text/css">
.b1,.b2,.b3,.b4,.b1b,.b2b,.b3b,.b4b,.b{display:block;overflow:hidden;}
.b1,.b2,.b3,.b1b,.b2b,.b3b{height:1px;}
.b2,.b3,.b4,.b2b,.b3b,.b4b,.b{border-left:1px solid #999;border-right:1px solid #999;}
.b1,.b1b{margin:0 5px;background:#999;}
.b2,.b2b{margin:0 3px;border-width:2px;}
.b3,.b3b{margin:0 2px;}
.b4,.b4b{height:2px;margin:0 1px;}
.d1{background:#F7F8F9;}
</style>
</head>

<body>
<div>
<b class="b1"></b><b class="b2 d1"></b><b class="b3 d1"></b><b class="b4 d1"></b>
<div class="b d1">
简洁型css圆角矩形 - www.52css.com
</div>
<b class="b4b d1"></b><b class="b3b d1"></b><b class="b2b d1"></b><b class="b1b"></b>
</div>
</body>
</html>

[img=http://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&email=fRUcHhYWGAQ9GxIFEBwUEVMeEhA]http://rescdn.qqmail.com/zh_CN/htmledition/images/function/qm_open/ico_mailme_02.png[/img]

使用道具举报

admin

管理员

Rank: 9 Rank: 9 Rank: 9

TA的每日心情

	无聊 2025-5-27 03:37:20

签到天数: 366 天

[LV.9]以坛为家II

板凳

发表于 2011-8-12 01:04:27 |只看该作者

试了又试，终于见效了.....

<!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>Css圆角</title>
</head>
<style type="text/css">
.x1,.x2,.x3,.x4,#content{display:block;overflow:hidden;}
#content{height:500px;border:1px red solid;border-width:0 1px;}
.x1,.x2,.x3,.x4{height:1px;}
.x1{background-color:red;}
/*.x1,.x2,.x3,.x4{border:1px red solid;}*/
.x1,.x2,.x3,.x4{border-left:1px red solid;border-right:1px red solid;}
.x1{margin:0 5px;}
.x2{margin:0 3px;border-width:2px;}
.x3{margin:0 2px;}
.x4{margin:0 1px;height:2px;}
</style>
<body>
<div>
<b class="x1"></b><b class="x2"></b><b class="x3"></b><b class="x4"></b>
<div id="content">这是内容</div>
<b class="x4"></b><b class="x3"></b><b class="x2"></b><b class="x1"></b>
</div>
</body>
</html>

复制代码

[img=http://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&email=fRUcHhYWGAQ9GxIFEBwUEVMeEhA]http://rescdn.qqmail.com/zh_CN/htmledition/images/function/qm_open/ico_mailme_02.png[/img]

使用道具举报