有立体感的文字
在很多的网站上，我们都会发现一些如下图的文字：
立体感文字
那么他们是如何实现的呢？答案就是他们使用了CSS3中的新特效text-shadow来制造文字的阴影，然后进行偏移定位从而让人有立体感；
关于CSS3的新特效：text-shadow
-
text-shadow的兼容性
因为CSS3是最新版本的css样式，而text-shadow又是其中的新样式之一，那么我们在用这个样式之前肯定是要先查看它在各个浏览器上的兼容性如何，以下是我在caniuse网站上查到的目前各个浏览器对text-shadow的兼容性报告：
text-shadow的兼容性
可见除IE10以下版本的IE浏览器，目前的主流浏览器如chrome，Firefox，Safari等都对其支持，所以我们是可以放心使用的；
-
text-shadow的用法
1.text-shadow是直接作用在文字上的，并且具有继承性，可以从下图看出：
具有继承性
2.text-shadow有四个值，如上图的：text-shadow: 1px 1px 1px rgba(0,0,0,0.5);，从左到右对这些值进行解析可以得知：
①：第一个值是阴影的X轴偏移，阴影的X轴偏移是默认从文字所处的位置进行横向偏移，允许负值；
文字阴影的X轴偏移
②：第二个值是阴影的Y轴偏移，阴影的Y轴偏移是默认从文字所处的位置进行横向偏移，允许负值；
文字阴影的Y轴偏移
③：第三个值是文字阴影的粗度，越粗越显模糊，如下图：
文字阴影的粗度
④：第四个值是文字阴影的颜色：
文字阴影的颜色
PS：最后可以再对字体和字的大小进行一些设置，就可以达成立体字的效果了；
附录：关于盒子的阴影特效box-shadow的一些简介
1.盒子阴影特效与文字阴影样式不一样的是它没有继承性；
盒子阴影特效没有继承性
2.box-shadow也有四个值，与text-shadow一一对应；
3.box-shadow的兼容性报告
盒子阴影特效的兼容性
