用图片实现圆角边框的效果

在页面上内容很多的时候,我们通常需要用特定的方式分离开,这样可以让访问者迅速明确页面上内容的分布情况,常用的方式是用色块和有边框的矩形。本文介绍的是用图片实现的圆角边框效果,如果运用得当,一定可以让你的页面增色不少。

用图片实现圆角边框的效果 – 示例

 
<style type="text/css">
 
.box, .box .content, .box .title, .box .title * { background: #FFF url('bg_box_green_800x800.gif') 100% 100% no-repeat; }
.box { margin: 3px 0; padding: 0 15px 0 0; }
.box .title { background-position: 100% 0; margin: 0 -15px 0 0; padding: 0 15px 0 0; }
.box .title * { background-position: 0 0; margin: 0; padding: 15px 0 5px 15px; height: 1%; }
.box .content { background-position: 0 100%; margin-right: 0px; padding: 0 0 15px 15px; }
.box .title h4 { color: #227A1D; }
.box .content p {margin:0; padding:8px 0;}
 
</style>
 
<div class="box">
	<div class="title">
		<h4>Codebit.cn - 聚合小段精华代码</h4>
	</div>
	<div class="content">
 
	<p>在编程的过程中,我们通常都会积累很多简单、有效并且可重用的小段代码,一个简单的字符串处理函数或者一个验证邮件地址的正则表达式,又或者一个简单的文件上传类,甚至一个效果不错的CSS导航样式。这些小技巧为我们节省了不少时间,但是时间一长,代码数量越来越多,寻找起来也耗费了不少时间。因此,本站致力于收集整理一些类似的小知识,并且努力提高文章搜索质量,一来方便大家查阅,二来也算是支持一下开源事业。</p>
 
	</div>
</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