CSS3文字阴影与盒子阴影及其案例

文字阴影

文字阴影是css3其中的一个属性，它的书写格式是text-shadow：；每个属性必然有对应的属性值。text-shadow的属性值有：x y blur color ；x是延x轴移动的距离，y是延y轴移动的距离，blur是阴影的模糊值。要注意一点的是在文字阴影没有设置颜色的情况下，默认与文字的颜色一致。如下图所示：

要想改变阴影的颜色就在text-shadow属性里写需要变换的颜色即可。
多文字阴影的书写方式如：text-shadow：10px 10px 5px blue，-10px -10px 5px blue；如图所示：

盒阴影

盒阴影是在一个容器外产生一个阴影，从而达到需要实现的效果样式。盒阴影的书写格式是：box-shadow：x y blur spread color inset；盒阴影的x y blur值与文字阴影的意思相近，spread是阴影的模糊范围，inset是内阴影（注：外阴影outset是盒阴影的默认值，且千万注意书写中outset不要写，因为写过后阴影不会生效）。
书写格式与网页显示如图：

在这里盒阴影的颜色与文字阴影的颜色的特点有所不同，盒阴影的默认颜色不随色块背景颜色变化而变化，它默认就是黑色。
下面做一个盒阴影的小案例：
通过盒阴影与位移让色块看起来浮起的效果：

划过div时阴影和向上位移同时生效，会在视觉上产生浮起来的感觉。
逆战班0222