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垂直偏移(可取正负值) 阴影大小阴影扩展阴影颜色值

实例一：

.shadow{ width:200px; height: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; }

效果图：
CSS3中如何实现图层阴影和文字阴影效果

把box-shadow投影类型改为inset，效果图：
CSS3中如何实现图层阴影和文字阴影效果

实例二：

.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; }

效果图：
CSS3中如何实现图层阴影和文字阴影效果

text-shadow文字阴影

上面我们讨论了关于css3图层阴影 box-shadow来实现图层阴影的效果，今天我们来共同学习一下如何实现文字阴影的效果，将用到css3的另外一个属性text-shadow，这两个效果分别增强了图层和文字的质感，创建立体效果。

语法：

text-shadow ： none |  none | [, ] *  或none |  [,  ]*

text-shadow:X轴上的位移(正负皆可),Y轴上的位移(正负皆可),阴影的宽度,阴影的颜色值

说明：
和图层阴影相似，它也可以对同一对象应用一组或多组阴影效果，用逗号隔开。X轴偏移可以为正负，当X为正时向右偏移，为负时向左偏移。Y轴偏移可以为正负，当X为正时向下偏移，为负时向上偏移。阴影的颜色值可以是#xxx，也可以是rgb，还可以是rgba透明色。

实例：text-shadow

 雨打浮萍

显示效果如下：
CSS3中如何实现图层阴影和文字阴影效果

对比box-shadow

专注于web前端开发  效果如下：

CSS3中如何实现图层阴影和文字阴影效果

显示效果如下：
CSS3中如何实现图层阴影和文字阴影效果

感谢各位的阅读！关于“CSS3中如何实现图层阴影和文字阴影效果”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！

网页名称：CSS3中如何实现图层阴影和文字阴影效果
URL链接：http://scjbc.cn/article/podess.html

CSS3中如何实现图层阴影和文字阴影效果

其他资讯