字体渐变 border-image

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

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

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

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

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

css：

[css]  view plain  copy

1. <style type="text/css">  
2.     .example{     
3.         width: 400px;             
4.         font-family: ´微软雅黑´;  
5.         font-size: 5em;  
6.         color: green;         
7.         margin: 20px auto;  
8.         text-align: center;  
9.     }  
10.     .gradual{         
11.         background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(yellow), to(blue));  
12.         -webkit-background-clip: text;  
13.             -webkit-text-fill-color: transparent;  
14.     }  
15.     .shadow1{             
16.         text-shadow: 5px 5px 5px gray;  
17.     }  
18.     .border1{             
19.         border: 2px dashed gray;/*dashed为虚线，solid为实线，dotted为点线，double为双线*/  
20.     }         
21.     .border2{  
22.         border: 10px solid;  
23.         border-image:url(./border.jpg) 10 repeat;  
24.     }  
25.     .border-shadow{  
26.         border: 1px solid black;  
27.         box-shadow: 0 0 15px 5px red;/*15px表示模糊半径，5px表示扩展半径*/  
28.     }  
29.   
30. </style>  

html：

[html]  view plain  copy

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

效果：