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>

效果：