无图片 CSS 圆角效果

Nifty Corners

在众多圆角效果的制作方法中,用图片可能是最常见的了,而本文介绍的 Nifty Corners 则是完全依靠 CSS 和 XHTML 制作的圆角效果。随后, Stu Nicholls 又在此基础上,制作出了更多富有创意的圆角效果。还等什么?赶快看看吧!

无图片 CSS 圆角效果 – 示例1

 
<style type="text/css">
.nifty{ margin: 0 auto;background: #9BD1FA; width:40%;}
.nifty .content { padding:0 10px; }
 
b.rtop, b.rbottom{display:block;background: #FFF}
b.rtop b, b.rbottom b{display:block;height:1px;overflow:hidden; background:#9BD1FA}
b.r1{margin: 0 5px}
b.r2{margin: 0 3px}
b.r3{margin: 0 2px}
b.rtop b.r4, b.rbottom b.r4{margin: 0 1px;height: 2px}
</style>
 
<div class="nifty">
	<b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>
	<div class="content">
	Rounded corners
	</div>
	<b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b>
</div>

Stu Nicholls – Krazy Korners

在众多圆角效果的制作方法中,用图片可能是最常见的了,而本文介绍的 Nifty Corners 则是完全依靠 CSS 和 XHTML 制作的圆角效果。随后, Stu Nicholls 又在此基础上,制作出了更多富有创意的圆角效果。还等什么?赶快看看吧!

无图片 CSS 圆角效果 – 示例2

 
<style type="text/css">
#krazy_container {display:block; margin:0 auto; background:#bcb; padding:50px 0;}
#krazy_container h2 {margin-bottom:1em;}
#krazy_container h3 {clear:both; margin-top:4em;}
 
/* Inset 3D Raised 
*****************************************************************************/
.raised {background: transparent; width:40%; margin:0 auto;}
.raised h1, .raised p {margin:0 10px;}
.raised h1 {font-size:2em; color:#fff; letter-spacing:1px;}
.raised p {padding-bottom:0.5em;}
 
.raised .top, .raised .bottom {display:block; background:transparent; font-size:1px;}
.raised .b1, .raised .b2, .raised .b3, .raised .b4, .raised .b1b, .raised .b2b, .raised .b3b, .raised .b4b {display:block; overflow:hidden;}
.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%; margin:0 auto;}
.inset h1, .inset p {margin:0 10px;}
.inset h1 {font-size:2em; color:#fff; letter-spacing:1px;}
.inset p {padding-bottom:0.5em;}
 
.inset .top, .inset .bottom {display:block; background:transparent; font-size:1px;}
.inset .b1, .inset .b2, .inset .b3, .inset .b4, .inset .b1b, .inset .b2b, .inset .b3b, .inset .b4b {display:block; overflow:hidden;}
.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;}
 
/* Chamfer Borders 
*****************************************************************************/
.chamfer {background: transparent; width:40%; margin:0 auto;}
.chamfer h1, .chamfer p {margin:0 10px;}
.chamfer h1 {font-size:2em; color:#000; letter-spacing:1px;}
.chamfer p {padding-bottom:0.5em;}
 
.chamfer .top, .chamfer .bottom {display:block; background:transparent; font-size:1px;}
.chamfer .b1, .chamfer .b2, .chamfer .b3, .chamfer .b4, .chamfer .b5 {display:block; overflow:hidden; height:1px; background:#eca; border-left:1px solid #000; border-right:1px solid #000;}
.chamfer .b1 {margin:0 5px; background:#000;}
.chamfer .b2 {margin:0 4px;}
.chamfer .b3 {margin:0 3px;}
.chamfer .b4 {margin:0 2px;}
.chamfer .b5 {margin:0 1px;}
 
.chamfer .boxcontent {display:block; background:#eca; border-left:1px solid #000; border-right:1px solid #000;}
 
/* Square cutout Borders 
*****************************************************************************/
.square {background: transparent; width:40%; margin:0 auto;}
.square h1, .square p {margin:0 10px;}
.square h1 {font-size:2em; color:#00c; letter-spacing:1px;}
.square p {padding-bottom:0.5em;}
 
.square .top, .square .bottom {display:block; background:transparent; font-size:1px;}
.square .b1t {margin:0 6px; display:block; overflow:hidden; height:5px; background:#9ce; border-left:1px solid #00c; border-right:1px solid #00c; border-top:1px solid #00c;}
.square .b2 {display:block; height:1px; margin:0; background:#9ce; border-left:7px solid #00c; border-right:7px solid #00c; overflow:hidden;}
.square .b1b {margin:0 6px; display:block; overflow:hidden; height:5px; background:#9ce; border-left:1px solid #00c; border-right:1px solid #00c; border-bottom:1px solid #00c;}
 
.square .boxcontent {display:block; background:#9ce; border-left:1px solid #00c; border-right:1px solid #00c;}
 
/* Curved cutout Borders 
*****************************************************************************/
.curved {background: transparent; width:40%; margin:0 auto;}
.curved h1, .curved p {margin:0 10px;}
.curved h1 {font-size:2em; color:#fff; letter-spacing:1px;}
.curved p {padding-bottom:0.5em;}
 
.curved .top, .curved .bottom {display:block; background:transparent; font-size:1px;}
.curved .b1, .curved .b2, .curved .b3, .curved .b4 {display:block; overflow:hidden; height: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%; margin:0 auto;}
.serif h1, .serif p {margin:0 10px;}
.serif h1 {font-size:2em; color:#fff; letter-spacing:1px;}
.serif p {padding-bottom:0.5em;}
 
.serif .top, .serif .bottom {display:block; background:transparent; font-size:1px;}
.serif .b1, .serif .b2, .serif .b3, .serif .b4 {display:block; overflow:hidden;}
.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%; margin:0 auto;}
.pillar h1, .pillar p {margin:0 10px;}
.pillar h1 {font-size:2em; color:#fff; letter-spacing:1px;}
.pillar p {padding-bottom:0.5em;}
 
.pillar .top, .pillar .bottom {display:block; background:transparent; font-size:1px;}
.pillar .b1, .pillar .b2, .pillar .b3, .pillar .b4 {display:block; overflow:hidden;}
.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;}
 
 
/* Barrel cutout Borders 
*****************************************************************************/
.barrel {background: transparent; width:40%; margin:0 auto;}
.barrel h1, .barrel p {margin:0 10px;}
.barrel h1 {font-size:2em; color:#fff; letter-spacing:1px;}
.barrel p {padding-bottom:0.5em;}
 
.barrel .top, .barrel .bottom {display:block; background:transparent; font-size:1px;}
.barrel .b1, .barrel .b2, .barrel .b3, .barrel .b4, .barrel .b5 {display:block; overflow:hidden; height:1px; background:#e0cea3;}
.barrel .b1 {border-left:10px solid #dfd5c0; border-right:10px solid #dfd5c0;}
.barrel .b2 {border-left:5px solid #dfd5c0; border-right:5px solid #dfd5c0;}
.barrel .b3 {border-left:3px solid #dfd5c0; border-right:3px solid #dfd5c0;}
.barrel .b4 {border-left:2px solid #dfd5c0; border-right:2px solid #dfd5c0;}
.barrel .b5 {border-left:1px solid #dfd5c0; border-right:1px solid #dfd5c0;}
.barrel .b1 {margin:0 33%;}
.barrel .b2 {margin:0 20%;}
.barrel .b3 {margin:0 12%;}
.barrel .b4 {margin:0 5%;}
.barrel .b5 {margin:0 1px;}
 
.barrel .boxcontent {display:block; background:#e0cea3; border-left:1px solid #fff; border-right:1px solid #999;}
</style>
 
<div id="krazy_container">
 
<!-- Inset 3D Raised start -->
<div class="raised">
	<b class="top"><b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b></b>
	<div class="boxcontent">
		<h1>3D Raised</h1>
		<p>Rounded corners with raised borders</p>
	</div>
	<b class="bottom"><b class="b4b"></b><b class="b3b"></b><b class="b2b"></b><b class="b1b"></b></b>
</div>
<!-- Inset 3D Raised end -->
 
<p></p>
 
<!-- Inset 3D Curved start -->
<div class="inset">
	<b class="top"><b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b></b>
	<div class="boxcontent">
		<h1>3D Inset</h1>
		<p>Rounded corners with inset borders</p>
	</div>
	<b class="bottom"><b class="b4b"></b><b class="b3b"></b><b class="b2b"></b><b class="b1b"></b></b>
</div>
<!-- Inset 3D Curved end -->
 
<p></p>
 
<!-- Chamfer Borders start -->
<div class="chamfer">
	<b class="top"><b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b><b class="b5"></b></b>
	<div class="boxcontent">
		<h1>Chamfer Border</h1>
		<p>A 45 degree border</p>
	</div>
	<b class="bottom"><b class="b5"></b><b class="b4"></b><b class="b3"></b><b class="b2"></b><b class="b1"></b></b>
</div>
<!-- Chamfer Borders end -->
 
<p></p>
 
<!-- Square cutout Borders start -->
<div class="square">
	<b class="top"><b class="b1t"></b><b class="b2"></b></b>
	<div class="boxcontent">
		<h1>Square cutout Border</h1>
		<p>A box with cutout corners</p>
	</div>
	<b class="bottom"><b class="b2"></b><b class="b1b"></b></b>
</div>
<!-- Square cutout Borders end -->
 
<p></p>
 
<!-- Curved cutout Borders start -->
<div class="curved">
	<b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b>
	<div class="boxcontent">
		<h1>Curved cutout Border</h1>
		<p>A box with cutout corners</p>
	</div>
	<b class="bottom"><b class="b4"></b><b class="b3"></b><b class="b2"></b><b class="b1"></b></b>
</div>
<!-- Curved cutout Borders end -->
 
<p></p>
 
<!-- flared serif start -->
<div class="serif">
	<b class="top"><b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b></b>
	<div class="boxcontent">
		<h1>NEW! Flared shape</h1>
		<p>Corners to give a serif effect.</p>
	</div>
	<b class="bottom"><b class="b4"></b><b class="b3"></b><b class="b2"></b><b class="b1"></b></b>
</div>
<!-- flared serif end -->
 
<p></p>
 
<!-- Pillar type start -->
<div class="pillar">
	<b class="top"><b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b2"></b><b class="b4"></b></b>
	<div class="boxcontent">
		<h1>NEW! Pillar shape</h1>
		<p>Corners to give a rounded pillar effect.</p>
	</div>
	<b class="bottom"><b class="b4"></b><b class="b2"></b><b class="b3"></b><b class="b2"></b><b class="b1"></b></b>
</div>
<!-- Pillar type end -->
 
<p></p>
 
<!-- Barrel cutout Borders start -->
<div class="barrel">
	<b class="top"><b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b><b class="b5"></b></b>
	<div class="boxcontent">
		<h1>Barrel shape</h1>
		<p>A box with top and bottom bulges.</p>
	</div>
	<b class="bottom"><b class="b5"></b><b class="b4"></b><b class="b3"></b><b class="b2"></b><b class="b1"></b></b>
</div>
<!-- Barrel cutout Borders end -->
 
</div>

Stu Nicholls – 带标题栏的圆角效果

这是 Stu Nicholls 制作的带标题的边框圆角效果,在网站很多地方都会用到。

无图片 CSS 圆角效果 – 示例3

 
<style type="text/css">
.xsnazzy h1, .zsnazzy h1 {
	margin:0; 
	font-size:14px; 
	padding:0 10px 5px 10px; 
	border-bottom:1px solid #444;
}
.xsnazzy p, .zsnazzy p {
	margin:0; 
	padding:5px 10px; 
	font-size:12px;
}
.xsnazzy {
	background: transparent; 
	width:240px; 
	float:left; 
	margin:0 3px;
}
 
.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:#fff; 
	border-left:1px solid #444;
	border-right:1px solid #444;
}
.xb1 {
	margin:0 5px; 
	background:#444;
}
.xb2 {
	margin:0 3px;
	border-width:0 2px;
}
.xb3 {
	margin:0 2px;
}
.xb4 {
	height:2px; 
	margin:0 1px;
}
 
.xboxcontent {
	display:block; 
	border:0 solid #444; 
	border-width:0 1px; 
	height:auto;
}
* html .xboxcontent {
	height:1px;
}
 
.color_a {
	background:#c9ba65;
	color:#fff;
}
</style>
 
<div class="xsnazzy">
	<b class="xtop"><b class="xb1"></b><b class="xb2 color_a"></b>
	<b class="xb3 color_a"></b><b class="xb4 color_a"></b></b>
 
	<div class="xboxcontent">
 
		<h1 class="color_a">Blah Blah Title</h1>
 
		<p>You are not currently logged in.</p>
		<p>If you don't have a login you can 
		<a href="#nogo">register here</a>.</p>
		<p>If you have one, then LOGIN <a href="#nogo">here</a>.</p>
		<p>If you don't know if you should have one - and need convincing 
		that free, confidential, fast and useful is not enough then click 
		<a href="#nogo">here for a demo</a>.</p>
	</div>
 
	<b class="xbottom"><b class="xb4"></b><b class="xb3"></b>
	<b class="xb2"></b><b class="xb1"></b></b>
</div>

如何用图片的方式设置圆角区域

如何用图片的方式设置圆角区域

圆角可以让页面感觉不生硬,用好了圆角,会让页面增色不少,因此许多设计师想出各种各样的方法来实现圆角区域,本文介绍的是众多方案中的一种。

如何用图片的方式设置圆角区域 – 示例1

先用图形处理软件创建一个圆角的图片:

然后切出四个角的图片供接下来使用:

 
<style type="text/css">
.roundcont {
	width: 100%;
	background-color: #f90;
	color: #fff;
}
 
.roundcont p {
	margin: 0 10px;
}
 
.roundtop { 
	background: url(tr.gif) no-repeat top right; 
}
 
.roundbottom {
	background: url(br.gif) no-repeat top right; 
}
 
img.corner {
	width: 15px;
	height: 15px;
	border: none;
	display: block !important;
}
</style>
 
<div class="roundcont">
	<div class="roundtop">
		<img src="tl.gif" alt="" 
		width="15" height="15" class="corner" 
		style="display: none" />
	</div>
	
	<p><strong>Codebit.cn - 聚合小段精华代码</strong></p>
	<br />
	<p>在编程的过程中,我们通常都会积累很多简单、有效并且可重用的小段代码,一个简单的字符串处理函数或者一个验证邮件地址的正则表达式,又或者一个简单的文件上传类,甚至一个效果不错的CSS导航样式。这些小技巧为我们节省了不少时间,但是时间一长,代码数量越来越多,寻找起来也耗费了不少时间。因此,本站致力于收集整理一些类似的小知识,并且努力提高文章搜索质量,一来方便大家查阅,二来也算是支持一下开源事业。</p>
	<br />
 
	<p>http://www.CodeBit.cn</p>
  
	<div class="roundbottom">
		<img src="bl.gif" alt="" 
		width="15" height="15" class="corner" 
		style="display: none" />
	</div>
</div>

用 CSS3 的方式制作圆角区域

由于在 CSS 1/CSS 2 中,一个页面元素只能允许一个背景图片,所以在制作圆角边框的时候,不得不费尽心思。Andy Budd 在 24ways 上发表了一篇文章,向我们介绍了如何用 CSS3 的方式制作圆角。本文只是按照原文的思路意译,仅仅摘录了和内容相关的部分,文章后面给出了原文网址,感兴趣的朋友可以直接浏览。

在 CSS 3 中,一个元素允许 8 张背景图,这意味着你不需要附加元素,也可以制作各种各样的效果。

制作 CSS3 圆角边框,非常简单:

 
.box {
	background-image: url(top-left.gif), url(top-right.gif), url(bottom-left.gif), url(bottom-right.gif);
}

默认情况下,背景会平铺,这并不是我希望的,可以用下面的代码:

 
.box {
	background-image: url(top-left.gif), url(top-right.gif), url(bottom-left.gif), url(bottom-right.gif);
	background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
}

最后,我们需要定义每个背景的位置:

 
.box {
	background-image: url(top-left.gif), url(top-right.gif), url(bottom-left.gif), url(bottom-right.gif);
	background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
	background-position: top left, top right, bottom left, bottom right;
}

注:目前此代码只能在 Safari 下运行, firefox 和 IE 还不支持。

除了支持多个背景图,CSS3 还能够不用任何图片来制作圆角,你可以通过为 border-radius 设置一个合适的值来达到此目的。

 
.box {
	border-radius: 1.6em;
}

这个技术目前只被 Firefox/Camino 支持,如果你希望创建一个可以被基于 Mozilla 和 WebKit 的浏览器支持的代码,可以将他们整合到一起:

 
.box {
	background-image: none;
	-moz-border-radius: 1.6em;
	-webkit-border-radius: 1.6em;
	border-radius: 1.6em;
	background-image: url(top-left.gif), url(top-right.gif), url(bottom-left.gif), url(bottom-right.gif);
	background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
	background-position: top left, top right, bottom left, bottom right;
}

如何用图片的方式设置圆角区域 – 示例2

本文并非直译原文,如果你对此文章感兴趣,请浏览:
http://24ways.org/2006/rounded-corner-boxes-the-css3-way