html页面下的阴影,html5/css3文本阴影(text-shadow)详解及示例

text-shadow属性用于设置文本内容的阴影效果或模糊效果。目前，text-shadow属性已经得到Safari浏览器、Firefox浏览器、Chrome浏览器和Opera浏览器的支持。IE8版本以下的IE浏览器都不支持该特性。从Web浏览器支持的情况来看，大部分移动平台的Web浏览器都能得到很好的支持。

text-shadow的语法和box-shadow的语法基本上一致：text-shadow ： none | none | [, ] * 或none | [, ]*

相关属性 ： 无

：指定颜色。

：由浮点数字和单位标识符组成的长度值。可为负值。指定阴影的水平延伸距离。

：由浮点数字和单位标识符组成的长度值。不可为负值。 指定模糊效果的作用距离。如果你仅仅需要模糊效果，将前两个 length 全部设定为 0 。请参阅 长度单位。

设置或检索对象中文本的文字是否有阴影及模糊效果。可以设定多组效果，方式是用逗号隔开。可以被用于伪类 :first-letter 和 :first-line 。对应的脚本特性为 textShadow

text-shadow是可以省略前缀的几个CSS属性之一，类似的还有box-shadow，它必须应用于文本，并它们有相同的四个参数：x-offset 　　水平位移

y-offest 　　垂直位移

blur 　　 模糊值

color of shadow 阴影颜色

h1 {

text-shadow: 0 1px 0 #fff;

color: #292929;

}

如下代码为使用text-shadow的简单示例：

div{

text-shadow:5px -10px 5px red;

color:#666;

font-size:16px;

}

严格来说 text-shadow不能算是css3的属性。实际上在css2.0时就已经有这个属性。不过不能被浏览器广泛支持。随着html5和css3的兴起。text-shadow也跟着受到重视。text-shadow的作用是在不使用图片的情况下，通过设置阴影或者模糊字体来增加文字的质感。

在html5和css3迅速推广的今天，掌握text-shadow这个简单的属性可以说是势在必行了。

常见的效果实例1：

textshadow

h2 {margin:0;padding:0;text-align:center;padding:10px 0;background-color:#ccc;}

.sp1 {color:#fff;text-shadow: 0 0 20px red;}

.sp2 {text-shadow: -1px -1px white, 1px 1px #333;color:#ccc;}

.sp3 {text-shadow: 1px 1px white, -1px -1px #777;color:#ccc;}

.sp4 {color: transparent; text-shadow: 0 0 3px #f96;}

.sp5 {color: transparent; text-shadow:0 0 6px #F96, -1px -1px #FFF, 1px -1px #444;}

.sp6{color: #fff; text-shadow: -1px -1px rgba(197, 223, 248,0.8),-2px -2px rgba(197, 223, 248,0.8),-3px -3px rgba(197, 223, 248,0.8),

-4px -4px rgba(197, 223, 248,0.8),-5px -5px rgba(197, 223, 248,0.8),-6px -6px rgba(197, 223, 248,0.8);}

设置多个阴影

设置多个阴影

设置多个阴影

设置多个阴影

设置多个阴影

设置多个阴影

示例2:/p>

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

/*

#text

{

text-shadow:2px 2px 0px orange;

}

#text1

{

text-shadow:2px 2px 5px orange;

}

#text2

{

text-shadow:2px 2px 5px orange,-2px 2px 5px green;

}

/*]]>*/

没有阴影

有阴影

阴影叠加