box -s hadow 图层 阴影
box-shadow:阴影类型 X水平偏移(可取正负值) Y垂直偏移(可取正负值) 阴影大小 阴影扩展 阴影颜色值
阴影类型可以省略，默认为外投影，当它的值为inset时，为内阴影效果。
X水平偏移和Y垂直偏移可取正负值，当X为负值是投影在左边，为正时投影在 右边 。当Y为负值时投影在上面，为正时投影在下面。
阴影大小和扩展与ps里面的原理一样。
浏览器兼容性：
不同的浏览器兼容性不同，mozilla内核的浏览器写法如下（但新版本的 火狐浏览器 已经不需要再添加）：
-moz-box-shadow:阴影类型 X水平偏移(可取正负值) Y垂直偏移(可取正负值) 阴影大小 阴影扩展 阴影颜色值
webkit 内核的浏览器写法如下：
-webk IT -box-shadow:阴影类型 X水平偏移(可取正负值) Y垂直偏移(可取正负值) 阴影大小 阴影扩展 阴影颜色值
实例一：
CSS Code@H_ 360 _26@ 复制内容到剪贴板
<div&nbs p; class= "shadow" ></div> .shadow{ width : 200px ; h ei ght : 50px ; box-shadow: 3px 3px 3px 3px # 000 ; /*-moz-box-shadow:3px 3px 3px 3px #000; //以火狐为代表的mozilla内核浏览器，火狐现在的版本已经支持这个属性，所以 不用 再加-moz*/ -webkit-box-shadow: 3px 3px 3px 3px #000 ; }
效果图：
把box-shadow投影类型 改为 inset，效果图：
实例二：
CSS Code 复制内容到剪贴板
<div class= "shadow" ></div> .shadow{ width : 200px ; height : 50px ; box-shadow:0 - 5px 5px 0 red , 5px 0 5px 0 yellow ,0 5px 5px 0 green ,- 5px 0 5px 0 blue ; /*-moz-box-shadow:0 -5px 5px 0 red,5px 0 5px 0 yellow,0 5px 5px 0 green,-5px 0 5px 0 blue; //以火狐为代表的mozilla内核浏览器，火狐现在的版本已经支持这个属性，所以不用再加-moz*/ -webkit-box-shadow:0 - 5px 5px 0 red , 5px 0 5px 0 yellow ,0 5px 5px 0 green ,- 5px 0 5px 0 blue ; }
效果图：
text-shadow文字阴影
上面我们讨论了关于css3图层阴影 box-shadow来实现图层阴影的效果，今天我们来共 同学 习一下如何实现文字阴影的效果，将用到css3的另外一个属性text-shadow，这两个效果分别增强了图层和文字的质感，创建立体效果。
语法：
XM L/HT ML Code 复制内容到剪贴板
@H_ 126 _334@ @H_ 777 _335@ 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 复制内容到剪贴板
< h1 style = "font-f ami ly:Microsoft Yahei; font- Size: 28px; color:#333; text-shadow:2px 2px 5px #f60;" > 雨打浮萍 </ h1 >
显示效果如下：
对比box-shadow
XML/HTML Code 复制内容到剪贴板
< h2 style = "font-f am ily:Microsoft Yahei; font-size:18px; color:#333; width:200px; line-height:30px; text-align: center ; box-shadow:2px 2px 5px #f60;" > 专注于web前端开发 </ h2 >
效果如下：
显示效果如下：
总结
以上是 为你收集整理的 详解CSS3的图层阴影和文字阴影效果使用 全部内容，希望文章能够帮你解决 详解CSS3的图层阴影和文字阴影效果使用 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于详解CSS3的图层阴影和文字阴影效果使用的详细内容...