举例详解CSS中的text-shadow文字阴影效果使用

text-shadow

语法

1. text-shadow: h-shadow v-shadow blur color;  

实例

基础的文本阴影效果：

1. {   
2.     text-shadow: 5px 5px 5px #FF0000;   
3. }  

Eg:

1. {text-shadow: h-shadow v-shadow blur color;}  

附：E即Element，元素的意思。

兼容IE的写法：

滤镜语法：

  Eg:  

1. {filter:shadow(Color=颜色值,Direction=数值,Strength=数值)}  

Direction用于设定投影的主向，取值为0即零度（表示向上方向），45为右上，90为右，135为右下，180为下方，225为左下方，270为左方，315为左上方；Strength就是强度，类似于text-shadow中的blur值。

text-shadow的实例
 CSS代码：

1. .demo {   
2.   background: #666666;   
3.   width: 224px;   
4.   padding: 30px;   
5.   font: bold 55px/100% "Lucida Sans";   
6.   color: #fff;   
7.   text-transform: uppercase;   
8.   text-shadow: red 0 2px 0;   
9. }  

HTML代码：

1. <div class="demo">梦龙小站</div>  

预览效果：

例子2——改变阴影模糊半径

CSS代码：

1. .demo {   
2.   background: #666666;   
3.   width: 224px;   
4.   padding: 30px;   
5.   font: bold 55px/100% "Lucida Sans";   
6.   color: #fff;   
7.   text-transform: uppercase;   
8.   text-shadow: 0 0 20px red;   
9. }  

HTML代码：

1. <div class="demo">梦龙小站</div>  

预览效果：

例子3——辉光效果

CSS代码：