使用阴影特效，让文字更有立体感

有立体感的文字

在不少的网站上，咱们都会发现一些以下图的文字：

那么他们是如何实现的呢？答案就是他们使用了CSS3中的新特效text-shadow来制造文字的阴影，而后进行偏移定位从而让人有立体感；

关于CSS3的新特效：text-shadow

• text-shadow的兼容性 由于CSS3是最新版本的css样式，而text-shadow又是其中的新样式之一，那么咱们在用这个样式以前确定是要先查看它在各个浏览器上的兼容性如何，如下是我在caniuse网站上查到的目前各个浏览器对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轴偏移是默认从文字所处的位置进行横向偏移，容许负值；

②：第二个值是阴影的Y轴偏移，阴影的Y轴偏移是默认从文字所处的位置进行横向偏移，容许负值；

③：第三个值是文字阴影的粗度，越粗越显模糊，以下图：

④：第四个值是文字阴影的颜色：

PS：最后能够再对字体和字的大小进行一些设置，就能够达成立体字的效果了；

附录：关于盒子的阴影特效box-shadow的一些简介

1.盒子阴影特效与文字阴影样式不同的是它没有继承性；

2.box-shadow也有四个值，与text-shadow一一对应；

3.box-shadow的兼容性报告