css3文字渐变和阴影、图片边框和边框阴影

文字渐变效果使用background-image+ background-clip + text-fill-color来实现，具体介绍请看点击打开链接

文字阴影使用text-shadow来实现，具体介绍请看点击打开链接

图片边框使用border+border-image来实现，具体介绍请看点击打开链接

边框阴影使用box-shadow来实现，具体介绍请看点击打开链接

下面是一个小栗子及代码：

css：

<style type="text/css">
	.example{	
		width: 400px;			
		font-family: ´微软雅黑´;
		font-size: 5em;
		color: green;		
		margin: 20px auto;
		text-align: center;
	}
	.gradual{	    
		background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(yellow), to(blue));
		-webkit-background-clip: text;
	        -webkit-text-fill-color: transparent;
	}
	.shadow1{			
		text-shadow: 5px 5px 5px gray;
	}
	.border1{			
		border: 2px dashed gray;/*dashed为虚线，solid为实线，dotted为点线，double为双线*/
	}		
	.border2{
		border: 10px solid;
		border-image:url(./border.jpg) 10 repeat;
	}
	.border-shadow{
		border: 1px solid black;
		box-shadow: 0 0 15px 5px red;/*15px表示模糊半径，5px表示扩展半径*/
	}

</style>

html：

<div id="box">
	<div class="example gradual">文字渐变</div>
	<div class="example shadow1">文字阴影</div>
	<div class="example border1">边框1</div>
	<div class="example border2">边框2</div>		
	<div class="example border-shadow">边框阴影</div>
</div>

效果：