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

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

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

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

<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

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