今天小编跟大家讲解下有关详解CSS3的图层阴影和文字阴影效果使用 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关详解CSS3的图层阴影和文字阴影效果使用 的相关资料，希望小伙伴们看了有所帮助。
box-shadow图层阴影
box-shadow:阴影类型 X水平偏移(可取正负值) Y垂直偏移(可取正负值) 阴影大小 阴影扩展 阴影颜色值阴影类型可以省略，默认为外投影，当它的值为inset时，为内阴影效果。X水平偏移和Y垂直偏移可取正负值，当X为负值是投影在左边，为正时投影在右边。当Y为负值时投影在上面，为正时投影在下面。阴影大小和扩展与ps里面的原理一样。
浏览器兼容性：不同的浏览器兼容性不同，mozilla内核的浏览器写法如下（但新版本的火狐浏览器已经不需要再添加）：-moz-box-shadow:阴影类型 X水平偏移(可取正负值) Y垂直偏移(可取正负值) 阴影大小 阴影扩展 阴影颜色值webkit内核的浏览器写法如下：-webkit-box-shadow:阴影类型 X水平偏移(可取正负值) Y垂直偏移(可取正负值) 阴影大小 阴影扩展 阴影颜色值
实例一：
CSS Code复制内容到剪贴板 <divclass="shadow"></div> .shadow{ width:200px; height:50px; box-shadow:3px3px3px3px#000; -webkit-box-shadow:3px3px3px3px#000; }效果图：
把box-shadow投影类型改为inset，效果图：
实例二：
CSS Code复制内容到剪贴板 <divclass="shadow"></div> .shadow{ width:200px; height:50px; box-shadow:0-5px5px0red,5px05px0yellow,05px5px0green,-5px05px0blue; -webkit-box-shadow:0-5px5px0red,5px05px0yellow,05px5px0green,-5px05px0blue; }效果图：
text-shadow文字阴影
上面我们讨论了关于css3图层阴影 box-shadow来实现图层阴影的效果，今天我们来共同学习一下如何实现文字阴影的效果，将用到css3的另外一个属性text-shadow，这两个效果分别增强了图层和文字的质感，创建立体效果。
语法：
XML/HTML Code复制内容到剪贴板 text-shadow：none|<length>none|[<shadow>,]*<shadow>或none|<color>[,<color>]*text-shadow:X轴上的位移(正负皆可),Y轴上的位移(正负皆可),阴影的宽度,阴影的颜色值
说明：和图层阴影相似，它也可以对同一对象应用一组或多组阴影效果，用逗号隔开。X轴偏移可以为正负，当X为正时向右偏移，为负时向左偏移。Y轴偏移可以为正负，当X为正时向下偏移，为负时向上偏移。阴影的颜色值可以是#xxx，也可以是rgb，还可以是rgba透明色。
实例：text-shadow
XML/HTML Code复制内容到剪贴板 <h1style="font-family:MicrosoftYahei;font-size:28px;color:#333;text-shadow:2px2px5px#f60;">雨打浮萍</h1>显示效果如下：
对比box-shadow
XML/HTML Code复制内容到剪贴板 <h2style="font-family:MicrosoftYahei;font-size:18px;color:#333;width:200px;line-height:30px;text-align:center;box-shadow:2px2px5px#f60;">专注于web前端开发</h2>效果如下：
显示效果如下：
来源：爱蒂网
