用 CSS 修饰你的提示信息

本文所指的“提示信息”并非 Javascript 中的 alert(),而是直接放在页面中的想要引起访问者关注的区域,比如在注册页面我们会在表单上方放置一条提示:“为了能够更好的给您提供服务,请详细填写您的个人信息!”。在重视用户体验的今天,我们也要让这些提示信息更加准确、快速、形象的传递给用户。

用 CSS 修饰你的提示信息 – 示例

我们可以先创建一个上下边框为 2 象素的 DIV ,因为我们要用到一个16象素的小图标,所以我们加上 padding:

 
<style type="text/css">
div.alertMessage {
	border-top:2px solid;
	border-bottom:2px solid;
	padding:5px 15px 5px 45px;
	text-align:left;
}
</style>

为了让用户更加容易的区分出提示信息的性质,我们可以分别给不同的信息创建不同的样式,比如警告信息我们可以将颜色设置为黄色,然后再加上一个象征警告的小图标:

 
<style type="text/css">
div.exclamation {
	background:#FFF7C0 url('exclamation.gif') no-repeat 15px center;
	border-color:#FED626;
}
</style>

按照这样的方法我们还可以创建很多其他的信息提示样式:

 
<style type="text/css">
div.information {
	background:#F8FAFC url('information.gif') no-repeat 15px center;
	border-color:#B5D4FE;
}
</style>

这篇文章基于
http://www.bioneural.net/2006/04/01/create-a-valid-css-alert-message/ (英文)

本文将公共部分独立,通过修改两个属性来实现更多效果。

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

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

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

 
<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>

让你的文本框(input)更加丰富多彩!

经常看到一些网站的文本框有一些很不错的效果,比如搜索关键词文本框里面有一个象征搜索的小图片,或者是文本框边框非常柔和。其实,这些效果制作都非常简单,看过本文,相信你也可以实现丰富多彩的文本框效果。

让你的文本框(input)更加丰富多彩! – 示例

为你的文本框加一个说明用途的小图标

 
<style type="text/css">
 
input.txtInput {
	background: #fff;
	background-repeat: no-repeat;
	background-position: 2px center;
	border:1px solid #999;
	padding:2px 2px 2px 20px;
}
input.searchInput {background-image: url(search.gif);}
input.commentInput {background-image: url(comments.gif);}
 
</style>

上面的代码中 input.txtInput 定义了文本框中有小图标的通用样式,其中 padding 的第四个值是定义文字内容从 20 象素处开始,原因是本文的图片是 16 象素大小,文字四周有 2 象素的边距。具体到实际应用,需要根据你的图片大小决定。

然后,我们又定义了 searchInput commentInput 两个文本框样式,分别设置了2个不同的小图标。这样,我们在设置文本框的 class 时可以这样写:

 
<p>
<label for="keyword">搜索:</label> 
<input type="text" name="keyword" id="keyword" class="txtInput searchInput" />
</p>
 
<p>
<label for="comment">评论:</label> 
<input type="text" name="comment" id="comment" class="txtInput commentInput" />
</p>

为你的文本框加一个效果柔和的边框

 
<style type="text/css">
 
input.borderInput {
	background-image: url(border.gif);;
	background-repeat: no-repeat;
	background-position: left top;
	border:1px solid #d5dee9;
	padding:3px;
}
 
</style>

上面的代码设置了一个背景图,并且左上对齐,当然,我们这个图片通常要宽一些、高一些,然后设置一个和渐变颜色近似的 border 。是的,一个效果柔和的边框实现了。

如何用 CSS 将超出显示宽度的内容隐藏起来

在显示列表的时候,太长的标题默认会换行显示,而这样的显示方式往往会破坏我们原有的页面布局,如何在我们无法知道标题长度的情况下,将超出显示宽度的内容隐藏起来?一个常见的做法是用服务器端语言判断、截取,但是这样在以后需要显示更长的标题时就需要修改服务器端脚本。

这里介绍的是如何用 CSS 将超出显示宽度的内容隐藏起来,在 IE 下我们还可以添加一个省略号,来表示多余的字符已经截断,以后改版也更方便。

如何用 CSS 将超出显示宽度的内容隐藏起来 – 示例

 
<style type="text/css">
.textOverFlow {
	width:300px;
	overflow:hidden; 
	text-overflow:ellipsis;
	white-space:nowrap;
	border:1px solid #ddd;
}
</style>
 
<div class="textOverFlow">
	CodeBit.cn 聚合小段精华代码 CodeBit.cn 聚合小段精华代码 CodeBit.cn 聚合小段精华代码 CodeBit.cn 聚合小段精华代码 CodeBit.cn 聚合小段精华代码 CodeBit.cn 聚合小段精华代码 CodeBit.cn 聚合小段精华代码 CodeBit.cn 聚合小段精华代码 CodeBit.cn 聚合小段精华代码 CodeBit.cn 聚合小段精华代码 CodeBit.cn 聚合小段精华代码 CodeBit.cn 聚合小段精华代码 CodeBit.cn 聚合小段精华代码 CodeBit.cn 聚合小段精华代码 CodeBit.cn 聚合小段精华代码 CodeBit.cn 聚合小段精华代码 CodeBit.cn 聚合小段精华代码 CodeBit.cn 聚合小段精华代码 CodeBit.cn 聚合小段精华代码 CodeBit.cn 聚合小段精华代码 CodeBit.cn 聚合小段精华代码 
</div>

实现原理:

(1)指定宽度:width:300px;
(2)overflow:hidden; 将超出内容隐藏
(3)text-overflow:ellipsis; IE 专有属性,当对象内文本溢出时显示省略标记(…)
(4)white-space:nowrap; 强制在同一行内显示所有文本,直到文本结束或者遭遇 br 对象。

如何用图片实现表单(form)的重置(reset)按钮

合理的运用图片,能够使站点更加丰富多彩,相信有许多喜欢用图片的设计师都遇到过一个问题:用图片实现表单(form)的重置(reset)按钮时,这个按钮并不能重置表单,相反却执行了提交表单的操作,本文说明了这个问题的原因,并给出了相应的解决方案。

出现上述问题的原因主要是:普通的按钮是通过类型来区分的,submit 为提交按钮,reset 为重置按钮,而类型为图片(type="image")的按钮,其默认操作是提交表单。因此,如果想用图片实现重置按钮,就需要一些额外的设置了。

如何用图片实现表单(form)的重置(reset)按钮 – 示例

一个简单包含提交、重置按钮的表单代码如下:

 
<form method="post" name="testForm_1" action="">
	<p><input type="text" name="keyword" /></p>
	<input type="submit" value="Submit" />
	<input type="reset" value="Reset" />
</form>

如果想用图片代替重置按钮,可以用下面的方法:

(1)给 type 为 image 的 input 添加 onclick 事件来实现重置,并通过添加 return false 来避免默认的提交操作:

 
<form method="post" name="testForm_2" action="">
	<p><input type="text" name="keyword" /></p>
	<input type="image" src="send.gif" />
	<input type="image" src="reset.gif" onclick="javascript:document.forms['testForm_2'].reset(); return false;" />
</form>

关键代码:

 
onclick="javascript:document.forms['testForm_2'].reset(); return false;"

document.forms[‘testForm_2′].reset(); 是将名称为 testForm_2 的表单重置。

return false; 是防止提交表单。

(2)直接用图片模拟的重置按钮

 
<form method="post" name="testForm_3" action="">
	<p><input type="text" name="keyword" /></p>
	<input type="image" src="send.gif" />
	<img src="reset.gif" alt="Reset" onclick="javascript:document.forms['testForm_3'].reset();" style="cursor:pointer;" />
</form>

关键代码:

 
onclick="javascript:document.forms['testForm_3'].reset(); "
 
style="cursor:pointer;"

document.forms[‘testForm_2′].reset(); 是将名称为 testForm_2 的表单重置。

style="cursor:pointer;" 设置图片悬停时,显示手型光标。

两种方法大同小异,在 javascript 被禁止的情况下,第二种方法按钮不会执行任何操作,而第一种方法却会执行提交操作。

当然,我们也可以直接把样式交给 CSS 去处理,用背景图的方式来实现,但是这样需要将 value 的值留空,如果 CSS 被禁止,那么将会显示一个没有文字的按钮,每个方法都有自己的问题,可以根据自己的需要来选择解决方案。

无图片制作带有 45 度斜角的导航菜单

带斜角的菜单通常是用图片来实现,而且往往需要避免重叠,本文介绍的是一个不用图片的解决方案,带斜角又不用图片,是不是很不可想象,没错,不用图片也可以做带斜角的导航菜单,赶快看看吧!

无图片制作带有 45 度斜角的导航菜单 – 示例

 
<style type="text/css">
 
/* for this demo only */
#slant {border-top:25px solid #fff; border-bottom:125px solid #fff;}
 
 
/* the stylesheet */
#slant {padding:0; margin:0; list-style:none;}
#slant li {float:left; text-align:center; margin-right:-20px;} 
#slant a {display:block; text-decoration:none;}
#slant a em {font-style:normal; display:block; padding:0 15px; height:25px; background:#363; float:left; cursor:pointer; color:#beb; line-height:24px;}
 
#slant a b, a span {cursor:pointer; display:block; width:0; overflow:hidden; float:left; background:#363;}
 
#slant a span {height:0; border-top:25px solid #363; border-right:25px solid #fff;}
 
#slant a b.p1,
#slant a b.p2,
#slant a b.p3,
#slant a b.p4,
#slant a b.p5 {border-top:5px solid #fff; border-right:5px solid #363;}
 
#slant a b.p1 {height:0; margin-top:20px;}
#slant a b.p2 {height:5px; margin-top:15px;}
#slant a b.p3 {height:10px; margin-top:10px;}
#slant a b.p4 {height:15px; margin-top:5px;}
#slant a b.p5 {height:20px;}
 
#slant a b.p6,
#slant a b.p7,
#slant a b.p8,
#slant a b.p9,
#slant a b.p10 {border-bottom:5px solid #fff; border-left:5px solid #363;}
 
#slant a b.p6 {height:20px;}
#slant a b.p7 {height:15px;}
#slant a b.p8 {height:10px;}
#slant a b.p9 {height:5px;}
#slant a b.p10 {height:0;}
 
#slant a:hover {background:#696;}
 
#slant a:hover em {color:#030; background:#696;}
 
#slant a:hover b.p1,
#slant a:hover b.p2,
#slant a:hover b.p3,
#slant a:hover b.p4,
#slant a:hover b.p5 {border-right-color:#696; background: #696;}
 
#slant a:hover b.p6,
#slant a:hover b.p7,
#slant a:hover b.p8,
#slant a:hover b.p9,
#slant a:hover b.p10 {border-left-color:#696; background: #696;}
 
#slant a:hover span {border-top-color:#696;}
 
</style>
 
<ul id="slant">
 
	<li><a href="#nogo1"><b class="p1"></b><b class="p2"></b><b class="p3"></b><b class="p4"></b><b class="p5"></b><em>Item One</em><span></span></a></li>
 
	<li><a href="#nogo2"><b class="p1"></b><b class="p2"></b><b class="p3"></b><b class="p4"></b><b class="p5"></b><em>Item Two</em><span></span></a></li>
 
	<li><a href="#nogo2"><b class="p1"></b><b class="p2"></b><b class="p3"></b><b class="p4"></b><b class="p5"></b><em>Longer Item Three</em><span></span></a></li>
 
	<li><a href="#nogo2"><b class="p1"></b><b class="p2"></b><b class="p3"></b><b class="p4"></b><b class="p5"></b><em>Four</em><span></span></a></li>
 
	<li><a href="#nogo2"><b class="p1"></b><b class="p2"></b><b class="p3"></b><b class="p4"></b><b class="p5"></b><em>.. and Five</em><span></span></a></li>
 
	<li><a href="#nogo2"><b class="p1"></b><b class="p2"></b><b class="p3"></b><b class="p4"></b><b class="p5"></b><em>6</em><b class="p6"></b><b class="p7"></b><b class="p8"></b><b class="p9"></b><b class="p10"></b></a></li>
 
</ul>

如此创意也许只有 Stu Nicholls 才会有,也许你看过之后会认为完全没有技术难度,但是为什么我们却没有第一个做出来?也许,我们什么都不缺,除了想象力。。。

CSSplay 本站已经多次强烈推荐,如果你的英文够好,可以通过下面的链接阅读原文:
http://www.cssplay.co.uk/menus/slanty.html

本站发布此代码已经通过原作者授权,如果您想转载或者用于其他用途,请直接和原作者联系!

带有二级菜单的滑动门效果

又是 CSSplay ,这个众多网页设计师心目中的圣地,总能带给我们诸多惊喜,Stu Nicholls 那富有创意并且高超的技巧,总能让一个个在我们看来不能实现的愿望变为现实。本文介绍的是他用 CSS 技术实现的带有二级菜单的滑动门效果,相信许多人期待已久了。

带有二级菜单的滑动门效果 – 示例

 
<style type="text/css">
/* ================================================================ 
This copyright notice must be untouched at all times.
 
The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/doors_drop_line_three.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any 
way to fit your requirements.
=================================================================== */
 
/* for this demo only */
#nav {margin:20px 0 80px 0;}
 
/* the styling */
#nav {
	float:left; 
	width:650px; 
	height:auto; 
	background:#fff url("bottom_line.gif") repeat-x bottom; 
	position:relative;
}
 
#nav .select, #nav .current {
	margin:0; 
	padding:0; 
	list-style:none; 
	display:block;
}
 
#nav li {
	display:inline; 
	margin:0; 
	padding:0;
	height:auto;
}
 
#nav .select a,
#nav .current a {
	display:block; 
	height:21px; 
	float:left; 
	background: url("left_blue.gif") no-repeat left top; 
	padding:0 0 0 3px; 
	border-bottom:1px solid #000; 
	text-decoration:none; 
	font-size:10px; 
	line-height:20px; 
	white-space:nowrap; 
	margin-left:2px;
}
* html #nav .select a, * html #nav .current a {width:1px;}
 
#nav .select a b, 
#nav .current a b {
	height:100%; 
	display:block; 
	background:url("right_blue.gif") no-repeat right top; 
	padding:0 6px 0 3px; 
	color:#000;
}
 
#nav .select a:hover, 
#nav .select li:hover a {
	background-position:0 -75px; 
	border-color:#046; 
	cursor:pointer;
}
 
#nav .select a:hover b, 
#nav .select li:hover a b {
	background-position:100% -75px; 
	border-color:#046; color:#fff;
}
 
#nav .sub {display:none;}
 
/* for IE5.5 and IE6 only */
#nav table {
	position:absolute; 
	border-collapse:collapse; 
	left:0; 
	top:0; 
	font-size:11px;
}
 
#nav .current a {
	background-position:0 -75px; 
	border-color:#046;
}
#nav .current a b {
	background-position:100% -75px; 
	color:#ff6;
}
 
 
#nav .sub li a:hover, 
#nav .select a:hover .sub li a:hover, 
#nav .select li:hover .sub li a:hover {
	background:#005984 url("sub_sep.gif") top right no-repeat; 
	color:#fff; 
	text-decoration:underline;
}
 
#nav .sub_active .current_sub a, 
#nav .sub_active a:hover {
	background:#005984 url("sub_sep.gif") top right no-repeat; 
	color:#ff6; 
	text-decoration:underline;
}
 
#nav .select li a:hover .sub, 
#nav .select li:hover .sub {
	display:block; 
	position:absolute; 
	width:650px; 
	top:21px; 
	left:0; 
	background:#005984; 
	margin-top:1px; 
	padding:0; 
	z-index:100; 
	border-bottom:20px solid #fff;
}
 
#nav .sub, #nav .sub_active {
	margin:0; 
	padding:0; 
	list-style:none;
}
#nav .sub_active {
	display:block; 
	position:absolute; 
	width:650px; 
	top:21px; 
	left:0; 
	background:#005984; 
	margin-top:1px; 
	padding:0; 
	z-index:10; 
	color:#000; 
	border-bottom:20px solid #fff;
}
* html #nav .sub_active, * html #nav .select a:hover .sub {
	z-index:-1; 
	margin-top:0; 
	margin-top:1px;
}
 
#nav .sub_active a {
	height:25px; 
	float:left; 
	text-decoration:none; 
	line-height:24px; 
	white-space:nowrap; 
	font-weight:normal;
}
#nav .sub_active a, 
#nav .select a:hover .sub li a, 
#nav .select li:hover .sub li a {
	display:inline; 
	background:#005984 url("sub_sep.gif") top right no-repeat; 
	padding:0 10px; 
	margin:0; 
	font-size:10px; 
	width:auto; 
	white-space:nowrap; 
	font-weight:normal; 
	border:0; 
	color:#fff; 
	height:25px; 
	line-height:24px; 
}
</style>
 
<div id="nav">
 
 
<ul class="select"><li><a href="#"><b>January</b>
<!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]--><ul class="sub"><li><a href="#">Fish</a></li>
<li><a href="#">Chips</a></li>
<li><a href="#">Bacon</a></li>
<li><a href="#">Eggs</a></li>
<li><a href="#">Tomato</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li></ul>
 
 
<ul class="select"><li><a href="#"><b>February</b>
<!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]--><ul class="sub">
<li><a href="#">Sausages</a></li>
<li><a href="#">Fried Bread</a></li>
<li><a href="#">Fillet steak</a></li>
<li><a href="#">Mushrooms</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li></ul>
 
 
<ul class="select"><li><a href="#"><b>March</b>
<!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]--><ul class="sub"><li><a href="#">Lager</a></li>
<li><a href="#">Beer</a></li>
<li><a href="#">Red wine</a></li>
<li><a href="#">Crisps</a></li>
<li><a href="#">Brandy</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li></ul>
 
 
<ul class="select"><li><a href="#"><b>April</b>
<!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]--><ul class="sub"><li><a href="#">Tea</a></li>
<li><a href="#">Coffee</a></li>
<li><a href="#">Milk</a></li>
<li><a href="#">Squash</a></li>
<li><a href="#">Lemonade</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li></ul>
 
 
<ul class="current"><li><a href="#"><b>May</b>
</a></li></ul><ul class="sub_active"><li><a href="#">Crab</a></li>
<li><a href="#">Shrimps</a></li>
<li><a href="#">Lobster</a></li>
<li class="current_sub"><a href="#">Prawns</a></li>
<li><a href="#">Salmon</a></li>
</ul>
 
 
<ul class="select"><li><a href="#"><b>June</b>
<!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]--><ul class="sub"><li><a href="#">Jam</a></li>
<li><a href="#">Lemon Curd</a></li>
<li><a href="#">Marmalade</a></li>
<li><a href="#">Marmite</a></li>
<li><a href="#">Bovril</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li></ul>
 
 
<ul class="select"><li><a href="#"><b>July</b>
<!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]--><ul class="sub"><li><a href="#">Lamb</a></li>
<li><a href="#">Chicken</a></li>
<li><a href="#">Pork</a></li>
<li><a href="#">Beef</a></li>
<li><a href="#">Cheese</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li></ul>
 
 
<ul class="select"><li><a href="#"><b>August</b>
<!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]--><ul class="sub"><li><a href="#">Beach</a></li>
<li><a href="#">Country walk</a></li>
<li><a href="#">Photography</a></li>
<li><a href="#">Window shopping</a></li>
<li><a href="#">Gardening</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li></ul>
 
 
<ul class="select"><li><a href="#"><b>September</b>
<!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]--><ul class="sub"><li><a href="#">Tulips</a></li>
<li><a href="#">Sunflower</a></li>
<li><a href="#">Cyclamen</a></li>
<li><a href="#">Dahlia</a></li>
<li><a href="#">Gladiolus</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li></ul>
 
 
<ul class="select"><li><a href="#"><b>October</b>
<!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]--><ul class="sub"><li><a href="#">Cup</a></li>
<li><a href="#">Saucer</a></li>
<li><a href="#">Plate</a></li>
<li><a href="#">Fruit bowl</a></li>
<li><a href="#">Egg cup</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li></ul>
 
 
</div>

您可以通过下面的链接访问 cssplay 原页面:
http://www.cssplay.co.uk/menus/doors_drop_line_three.html

无图片 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

如何用”百分比”设置页面的高度

在符合标准的 XHTML 模式下,将 DIV 的高度简单的设置为 100% 往往并不能达到想要的效果,原因是“百分比”是个相对于父节点的值,如果你没有设置他们的父节点的高度,那么设置 DIV 的高度为100%就没有了意义。

另外一个问题是你或许期望的并不是100%,而是在页面高度不够一屏时按照100%显示,当你的页面超过视窗的大小时,DIV 要能够撑开,这样的话min-height才是你真正想要的。

下面的代码可以让页面不足一屏时按照100%显示,当超过一屏时,又能够撑开:

 
html, body {
	height: 100%;
}
#container { /* this is the div you want to fill the window */
	min-height: 100%;
}

由于 Internet Explorer (IE) 6 及其以下的版本并不支持 min-height 属性,因此,我们需要添加针对 IE 的代码。

 
* html #container {
	height:100%
}

在 IE 下,当 DIV 的内容超过 DIV 本身的高度时, DIV 会自动撑开,因此这样的代码可以很好的解决上面的问题。