在开发中经常会使用阴影增加现实感，css3实现的模糊阴影主要分为盒阴影box-shadow和文本阴影text-shadow。今天就带大家玩转css的阴影，后面的拓展也只是抛砖引玉，希望给各位带来启迪。
一、box-shadow
该属性用来给容器添加一个或多个阴影效果。这个属性非常有用，可以结合伪类和动画实现设计的层次感和高亮度。基本语法是：
box-shadow: [inset] x-offset y-offset [blur] [spread] [color];
属性说明：
inset：【可选】将默认的外阴影设置为内阴影。
x-offset：【必需】水平方向阴影偏移量，可为负值。
y-offset：【必需】垂直方向上阴影偏移量，可为负值。
blur：【可选 】阴影模糊半径，不可为负值。
spread：【可选】阴影延展半径，可为负值。
color：【可选】阴影颜色。
box-shadow阴影偏移量可正可负，为正值时则向右或下偏移。
box-shadow可设置多个阴影，中间用逗号“，”分隔；比如可同时设置内外影响，例如：
拓展：多个阴影巧妙结合，可以创造出很多意想不到的效果。
四色边框：
双重边框
更多示例请自行创造。
二、text-shadow
通过css3的文本阴影属性可以用编程方式创建文本阴影。阴影可以创造出各式各样的效果，不过通常是高亮文本、给文本深度和使得文本突出显示。
语法是：
text-shadow: x-offset y-offset blur color;
属性说明：
x-offset：【必需】水平方向阴影偏移量，可为负值。
y-offset：【必需】垂直方向上阴影偏移量，可为负值。
blur：【可选 】阴影模糊半径，不可为负值。
color：【可选】阴影颜色。
更多效果等你亲自体验...
三、总结
阴影在网页开发中十分常见，巧妙使用阴影，可以为你的网页增色不少。
我是竹风，每天都有精彩前端干货，欢迎订阅收藏。