社区服务
银行
门派

风格切换
wind
wind5

IECN社区 » XHTML/CSS/Dreamweaver » 转：CSS圆角效果

本页主题: 转：CSS圆角效果打印 \| 加为IE收藏 \| 复制链接 \| 收藏主题 \| 上一主题 \| 下一主题

枫岩

我在想念心已累倦

级别: 总版主

精华: 12
发帖: 25385
威望: 21617 点
财富: 4580 K币
贡献值: 3 点
注册时间:2003-12-28
最后登录:2009-06-28

小中大引用推荐编辑只看复制

转：CSS圆角效果

系统提示：这是一个从旧版社区导入的帖子。
如果显示不正常，或需要查找旧帖中上传的附件，请参照原帖。
原帖地址：http://my.iecn.net/bbs/view/21960.html
如非必要，请不要修改此帖！如果修改，请保留以上信息。

堆出来的效果-_-
来源：
http://www.webreference.com/programming/css_borders/index.html

How to Add Fluid Borders to Your Boxes with CSS
By Stu Nicholls.

HTML 代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0//EN"  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" ><head><meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" /><title> Krazy Korners</title><meta name="Author" content="Stu Nicholls" /><style type="text/css">body {background:#e0e0e0;}/* Inset 3D Raised */.raised {background: transparent; width:40%;}.raised h1, .raised p {margin:0 10px;}.raised h1 {font-size:2em; color:#fff;}.raised p {padding-bottom:0.5em;}.raised .b1, .raised .b2, .raised .b3, .raised .b4, .raised .b1b, .raised .b2b, .raised .b3b, .raised .b4b {display:block; overflow:hidden; font-size:1px;}.raised .b1, .raised .b2, .raised .b3, .raised .b1b, .raised .b2b, .raised .b3b {height:1px;}.raised .b2 {background:#ccc; border-left:1px solid #fff; border-right:1px solid #eee;}.raised .b3 {background:#ccc; border-left:1px solid #fff; border-right:1px solid #ddd;}.raised .b4 {background:#ccc; border-left:1px solid #fff; border-right:1px solid #aaa;}.raised .b4b {background:#ccc; border-left:1px solid #eee; border-right:1px solid #999;}.raised .b3b {background:#ccc; border-left:1px solid #ddd; border-right:1px solid #999;}.raised .b2b {background:#ccc; border-left:1px solid #aaa; border-right:1px solid #999;}
.raised .b1 {margin:0 5px; background:#fff;}.raised .b2, .raised .b2b {margin:0 3px; border-width:0 2px;}.raised .b3, .raised .b3b {margin:0 2px;}.raised .b4, .raised .b4b {height:2px; margin:0 1px;}.raised .b1b {margin:0 5px; background:#999;}.raised .boxcontent {display:block; background:#ccc; border-left:1px solid #fff; border-right:1px solid #999;}
/* Inset 3D Curved */.inset {background: transparent; width:40%;}.inset h1, .inset p {margin:0 10px;}.inset h1 {font-size:2em; color:#fff;}.inset p {padding-bottom:0.5em;}.inset .b1, .inset .b2, .inset .b3, .inset .b4, .inset .b1b, .inset .b2b, .inset .b3b, .inset .b4b {display:block; overflow:hidden; font-size:1px;}.inset .b1, .inset .b2, .inset .b3, .inset .b1b, .inset .b2b, .inset .b3b {height:1px;}.inset .b2 {background:#ccc; border-left:1px solid #999; border-right:1px solid #aaa;}.inset .b3 {background:#ccc; border-left:1px solid #999; border-right:1px solid #ddd;}.inset .b4 {background:#ccc; border-left:1px solid #999; border-right:1px solid #eee;}.inset .b4b {background:#ccc; border-left:1px solid #aaa; border-right:1px solid #fff;}.inset .b3b {background:#ccc; border-left:1px solid #ddd; border-right:1px solid #fff;}.inset .b2b {background:#ccc; border-left:1px solid #eee; border-right:1px solid #fff;}
.inset .b1 {margin:0 5px; background:#999;}.inset .b2, .inset .b2b {margin:0 3px; border-width:0 2px;}.inset .b3, .inset .b3b {margin:0 2px;}.inset .b4, .inset .b4b {height:2px; margin:0 1px;}.inset .b1b {margin:0 5px; background:#fff;}.inset .boxcontent {display:block; background:#ccc; border-left:1px solid #999; border-right:1px solid #fff;}

/* Curved cutout Borders*/.curved {background: transparent; width:40%;}.curved h1, .curved p {margin:0 10px;}.curved h1 {font-size:2em; color:#fff;}.curved p {padding-bottom:0.5em;}.curved .b1, .curved .b2, .curved .b3, .curved .b4 {display:block; overflow:hidden; height:1px; font-size:1px;}.curved .b2, .curved .b3, .curved .b4 {background:#e0cea3; border-left:1px solid #fff; border-right:1px solid #fff;}.curved .b1 {margin:0 4px; background:#fff;}.curved .b2 {margin:0 4px; height:2px;}.curved .b3 {margin:0 3px;}.curved .b4 {margin:0; height:1px; border-width:0 3px 0 3px;}.curved .boxcontent {display:block; background:#e0cea3; border:0 solid #fff; border-width:0 1px;}
/* flared serif */.serif {background: transparent; width:40%;}.serif h1, .serif p {margin:0 10px;}.serif h1 {font-size:2em; color:#fff;}.serif p {padding-bottom:0.5em;}.serif .b1, .serif .b2, .serif .b3, .serif .b4 {display:block; overflow:hidden; font-size:1px;}.serif .b1, .serif .b2, .serif .b3 {height:1px;}.serif .b2, .serif .b3 {background:#fc0; border-left:1px solid #fff; border-right:1px solid #fff;}.serif .b4 {background:#fc0; border-left:1px solid #fff; border-right:1px solid #fff;}.serif .b1 {margin:0; background:#fff;}.serif .b2 {margin:0 1px; border-width:0 2px;}.serif .b3 {margin:0 3px;}.serif .b4 {height:2px; margin:0 4px;}.serif .boxcontent {display:block; background:#fc0; border-left:1px solid #fff; border-right:1px solid #fff; margin:0 5px;}/* Pillar type */.pillar {background: transparent; width:40%;}.pillar h1, .pillar p {margin:0 10px;}.pillar h1 {font-size:2em; color:#fff;}.pillar p {padding-bottom:0.5em;}.pillar .b1, .pillar .b2, .pillar .b3, .pillar .b4 {display:block; overflow:hidden; font-size:1px;}.pillar .b1, .pillar .b2, .pillar .b4 {height:1px;}.pillar .b2, .pillar .b3 {background:#d66; border-left:1px solid #fff; border-right:1px solid #fff;}.pillar .b4 {background:#d66; border-left:4px solid #fff; border-right:4px solid #fff;}.pillar .b1 {margin:0 2px; background:#fff;}.pillar .b2 {margin:0 1px; border-width:0 1px;}.pillar .b3 {height:2px; margin:0;}.pillar .b4 {margin:0 2px;}.pillar .boxcontent {display:block; background:#d66; border-left:1px solid #fff; border-right:1px solid #fff; margin:0 5px;}
</style></head><body>

<h2 class="bxs">Krazy Korners</h2><h3>by Stu Nicholls</h3>

<div class="curved"><b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b><div class="boxcontent"><h1>Example 1</h1><p>A box with cutout corners</p></div><b class="b4"></b><b class="b3"></b><b class="b2"></b><b class="b1"></b></div><p></p><div class="serif"><b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b><div class="boxcontent"><h1>Example 2</h1><p>Corners to give a serif effect.</p></div><b class="b4"></b><b class="b3"></b><b class="b2"></b><b class="b1"></b></div><p></p><div class="pillar"><b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b2"></b><b class="b4"></b><div class="boxcontent"><h1>Example 3</h1><p>Corners to give a rounded pillar effect.</p></div><b class="b4"></b><b class="b2"></b><b class="b3"></b><b class="b2"></b><b class="b1"></b></div><p></p><div class="raised"><b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b><div class="boxcontent"><h1>Example 4</h1><p>Rounded corners with raised borders</p></div><b class="b4b"></b><b class="b3b"></b><b class="b2b"></b><b class="b1b"></b></div><p></p><div class="inset"><b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b><div class="boxcontent"><h1>Example 5</h1><p>Rounded corners with inset borders</p></div><b class="b4b"></b><b class="b3b"></b><b class="b2b"></b><b class="b1b"></b></div>
</body></html>

顶端 Posted: 2005-09-29 17:19 | [楼主]

	帖子浏览记录版块浏览记录
IECN社区 » XHTML/CSS/Dreamweaver