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一起来玩耍
网友评论