CSS3之阴影-文字阴影text-shadow

CSS3中新增属性-阴影，可以做出很多漂亮的效果。

 

文字阴影text-shadow

 

text-shadow属性值的顺序：

 

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

 

参数分别表示水平阴影位置，垂直阴影位置，模糊半径，阴影颜色。

 

一个栗子：

 

   

   

   

 

   

Text Shadow

 

 

 

通过控制水平位移和垂直位移可以控制阴影偏向，正值偏右偏下。负值偏左偏上。

 

 

   

   

   

   

Text Shadow

 

 

 

 

可以修改模糊半径来控制阴影的模糊程度：

 

栗子：

 

 

   

   

   

   

Text Shadow

 

 

 

 

也可以定义多个阴影用逗号隔开：

 

 

   

   

   

   

Text Shadow

 

 

 

 

还可以来点特效，比如燃烧：

 

   

   

   

   

Text Shadow

 

 

 

 

浮雕效果：

 

 

   

   

   

   

Text Shadow