本站页眉部分就是采用有凸凹效果的分界线来分隔导航栏与其他内容。

制作有凸凹效果分界线的方法：

预览：

原理：

1. 上半部分背景颜色相对下半部分稍微浅一点
2. 上半部分的下边框颜色采用深色调（看起来比较暗）
3. 下半部分的上边框颜色采用比下半部分的背景颜色浅一点

本例颜色搭配如下：

说明：现阶段，由于部分浏览器对CSS3标准支持的力度不够，为了更好的展现面的动画效果，请使用Safari 4.x版本以上浏览器，或者高版本的Firefox浏览器。

实现过程

1. 定义动画过程 greenPulse （类似于函数或过程的概念）

@-webkit-keyframes greenPulse {
  from { background-color: #749a02; -webkit-box-shadow:: 0 0 9px #333; }
  50% { background-color: #91bd09; -webkit-box-shadow:: 0 0 18px #91bd09; }
  to { background-color: #749a02; -webkit-box-shadow:: 0 0 9px #333; }
}

2. 定义class（.）或ID（#）的动画属性，指定greenPulse来处理动画（类似于计算机语言中的委托）

a.button {
	-webkit-animation-duration: 2s;
	-webkit-animation-iteration-count: infinite;
	display: inline-block;
	-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .5);
	-webkit-border-radius:6px;
	-moz-border-radius:6px;
	color: #FFFFFF;
	padding-top: 5px;
	padding-right: 10px;
	padding-bottom: 5px;
	padding-left: 10px;
}
.green.button {
	-webkit-animation-name: greenPulse;
	-webkit-animation-duration: 3s;
}

代码说明：

• @-webkit-keyframe // 定义动画的三个阶段（或帧） from  （起始），50%（中间），to（结尾）
• -webkit-animation-duration: 2s; //代表单次动画所持续的时间
• -webkit-animation-iteration-count: infinite; //动画的循环次数，infinite代表不限次数循环，也可指定循环次数。
• -webkit-animation-name: greenPulse; //这里的greenPulse就是我们自己定义的动画处理函数或过程

3. HTML代码

<A>任鸟飞网页设计 - www.renniaofei.com</A>

下载所有源代码：radioactive buttons css3 animation （右键另存为）

本案例中涉及到4种常用的CSS3属性：

1. border-radius
2. box-shadow
3. text-shadow
4. rgba

效果预览：利用CSS3制作无背景图片特效按钮

HTML：

<a>CSS3 无背景图片特效按钮 »</a>

CSS:

<style type="text/css">
 .awesome, .awesome:visited {
    background-color: #2daebf;
    display: inline-block;
    padding: 5px 10px 6px;
    color: #fff;
    text-decoration: none;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
    -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
    text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
    border-bottom: 1px solid rgba(0,0,0,0.25);
    position: relative; cursor: pointer; }
  .awesome:hover{ background-color: #007d9a; }
</style>

下载链接：Vector Social Media Icons

文件中共包含下面12种网页元素。
1.Cursors
2.Checkboxes
3.Radio Buttons
4.Buttons
5.Forms
6.Ribbons
7.Page Corners
8.Calendar
9.Scrollbars
10.Signs
11.Tooltips bubbles
12.Small elements like bullets, arrows, paypal logo, visa etc

下载请点击下面的链接
WEB_UI