CSS3 text-shadow属性简介说明


摘要:
下文讲述css3中text-shadow属性的功能简介说明,如下所示:


css3 text-shadow功能

css3 text-shadow:
是css3中一个新属性,用于设置文字的阴影效果,
可以多次指定text-shadow属性值用于多次设置文字阴影效果。

css3 text-shadow语法:
text-shadow:[颜色 x轴 y轴 模糊半径],[颜色 x轴 y轴 模糊半径] …
——–或——–
text-shadow:[x轴 y轴 模糊半径 颜色],[x轴 y轴 模糊半径 颜色]
—————–参数说明—————-
1.颜色:指阴影部分所使用的颜色值–采用html支持的颜色值(十六进制或rgb或颜色代码…)
2.x轴:水平方向的偏移量—此值的单位为像素
3.y轴:垂直方向的偏移量—此值的单位为像素
4.阴影部分模糊效果的半径:此值应该为0或正数此值越大越模糊,阴影部分越模糊

例:
text-shadow属性举例说明:

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.maomao365.com/" /> 
<title>猫猫教程(www.maomao365.com)
text-shadow属性值举例说明
</title> 
<style type="text/css"> 
  /*
  形成一个文字阴影,x轴偏移30 y轴偏移20 模糊阴影半径5px
  */
 .div1{  
  margin:30px;
  text-shadow:blue 30px 20px 5px; 
  font-size:60px; 
} 

 /*颜色值放入后面*/
 .div2{  
   margin:30px;
  text-shadow:30px 20px 5px blue; 
  font-size:60px; 
} 

/*设置多个阴影*/
 .div3{  
   margin:30px;
  text-shadow:blue 30px 20px 5px,
      red 30px 10px 5px,
	  green 30px 20px 5px
	  ; 
  font-size:60px; 
} 


</style> 
</head> 
<body> 
 <div class="div1">猫猫教程</div>
 <div class="div2">猫猫教程</div>
 <div class="div3">猫猫教程</div>
</body> 
</html>
css text-shadow属性举例说明

css text-shadow属性举例说明