文章来源于网络收集而来，版权归原创者所有，如有侵权请及时联系！
6.2 盒阴影
掌握了文字阴影，盒阴影就是小菜一碟了。盒阴影的语法与文字阴影完全一样：水平偏移距离、垂直偏移距离、模糊半径，以及阴影颜色：
但是，盒阴影的的跨浏览器支持并不好，所以明智的做法是使用浏览器私有前缀，例如：
我们来给AND THE WINNER ISN’T网站侧边栏的电影海报加点阴影效果：
浏览器中的效果如下：
6.2.1 内阴影
box-shadow属性可以用来制作内阴影——出现在元素内部，而不是外部。内阴影可用来制作光晕效果，如下所示：
语法和之前的盒阴影差不多，只是多出来的inset告诉浏览器设置内阴影效果。现在给<body>标签应用该规则，为整个页面添加光晕效果，这样就会让页面的四周都出现阴影。
浏览器中的效果如下：
6.2.2 多重阴影
和文字阴影一样，盒阴影也可以有多重阴影效果。语法也类似，即将两组值用逗号分开，这样两组阴影就会按照代码中的先后顺序从上到下应用到元素上。换句话说，就是代码中先声明的规则，在浏览器中会覆盖下面的规则。
我将这句代码添加到body上，就能制造出一种神秘的粉红闺房效果。这肯定是受了页面上的《红磨坊》海报图片的影响！
可以说，本节的讲解简单明了。这也恰恰说明了CSS3在实现设计创意方面的强大能力。给元素追加或删除视觉效果就是一两秒钟的事，根本不需要使用图像处理软件。
想要了解W3C对box-shadow属性的标准定义，请参阅http://www.w3.org/TR/css3-background/#the-box-shadow。
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论