css3文字阴影属性text-shadow

css3文字阴影属性text-shadow

前面我们曾经学习了盒子阴影属性box-shadow，这篇文章说的文字阴影属性text-shadow。小文章一篇，希望大家通过这篇文章再来回顾一下box-shadow盒子阴影属性。

text-shadow属性值

对于w3c对于text-shadow的规范如下：

属性名: box-shadow

属性值: none | [<shadow>,]* <shadow>

初始值: none

应用于: 所有元素

继承性: 是

百分比: N/A

计算值:

1、none，没有指定任何的值，文本形式按照用户代理或者csser设置的文本形式展示

2、[<shadow>,]* ，每一个shadow（阴影值）之间用逗号(,)隔开，*表示可以重复无限制。其中shadow的值有如下属性值:

shadow的值有 [ <color>? <offset-x> <offset-y> <blur-radius>? | <offset-x> <offset-y> <blur-radius>? <color>? ]

color值可选，假如没有指定，那么跟文本颜色一致，假如文本颜色也没有指定，那么根据用户代理指定。

offset-x，offset-y，前一个值为阴影水平位移，后一个值为垂直位移，这点跟box-shadow一致，并且这两个值必须有，缺一不可。允许负值，offset-x负值向左偏移，offset-y向上偏移。

假如是多个shadow，那么就存在重叠现象，既然有重叠那就应该有层级关系，一般情况来说css中的层级关系是后来的值会覆盖前面的值，比如这么写css类

.f12{font-size:12px;}

.f12{font-size:14px;} //后者覆盖前者样式，所以文本字体会显示14px

但是对于css属性里面的值都是按照先来后到原则，并不是谁牛逼谁就在前面。这让我想起来了初中的时候，不管是拍照还是排队都是按照矮个子的在前面高个子在后面，就算是矮个子挡住了高个的下半身，但是起码还可以看见一个头嘛！

代码如下：