就看你们会不会box-shadow

css3晓得不，学H5的怎么能不知道css3里的box-shadow呢？当然属性何其多，就看你6不6。

几年前很火的那个人物悬空的照片还记得不

就是这种，他的原理就是脚旁边弄一滩水渍造成阴影，同理啊比如让图片浮起来有立体效果

box-shadow一步搞定！

好，那就来说说他到底该怎么写

box-shadow 属性向框添加一个或多个阴影

语法：

外阴影：box-shadow: X轴 Y轴 Rpx color;

阴影的X轴(可以使用负值) 阴影的Y轴(可以使用负值) 阴影模糊值（大小） 阴影的颜色

内阴影：box-shadow: X轴 Y轴 Rpx color inset;

默认是外阴影 内阴影：inset 可以设置成内部阴影

ps：此属性使用于盒模型 如(div,p,h1,h2,h3,h4,h5,h6等) 而不是用来设置文字阴影 如果设置文字阴影请参考知识点:text-shadow（同理）

因为此为新属性，为了兼容各主流浏览器并支持这些主浏览器的较低版本，基于主流浏览器上使用box-shadow属性时，我们需要将属性的名称写成-webkit-box-shadow的形式。Firefox浏览器则需要写成-moz-box-shadow的形式、 欧朋浏览器 -o-box-shadow、E>9 -ms-box-shadow。

知道写法以后呢，就是动手实际操作了，光说不练假把式对不对，这里就不多说了，就举一个例子

效果如上，当然数值可随意改变，正负都行，推荐一个在线调试的网站http://www.css88.com/tool/css3Preview/Box-Shadow.html，小伙伴们有兴趣的可以去玩玩

同时也欢迎大家小白，大神，渣渣学霸们加群142991222一起来玩耍