字体渐变 border-image
文字渐变效果使用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>
- <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>