字体渐变 border-image

文字渐变效果使用background-image+ background-clip + text-fill-color来实现，具体介绍请看点击打开链接
文字阴影使用text-shadow来实现，具体介绍请看点击打开链接
图片边框使用border+border-image来实现，具体介绍请看点击打开链接边框阴影使用box-shadow来实现，具体介绍请看点击打开链接
下面是一个小栗子及代码：css：[css] view plain copy<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：[html] view plain copy<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>  
效果：