相信有朋友在项目验收UI的时候发现许多样式实现效果差强人意，经过项目后发现，许多都处在沟通的问题上面，在不熟悉代码的情况下与前端沟通页面问题有时候会非常吃力，并不是前端不配合，只是因为你不清楚他们的实现方式，他们也无法认真看你UI稿细节；在项目赶时间的情下，实现效果会更悲剧...所以这时候如果你能把一些看起来稍复杂的UI效果写成css代码的话那就无敌好了。

比如你画了一个多层流比大阴影，希望鼠标滑过实现如下效果...

当你欢快去验收时...结果实际图：

看一下对比:

微小的差别，前端没有像素眼没法很好看出你稿子的效果，但是在咱们这是万万使不得的！怎么办！怎么说！怎么跟前端大哥哥们坦诚以待，理直气壮的表达！

首先咱们实际操作

我先写出两种样式在网页上面的实际效果：

你看,其实是可以很完美实现的，为了更好的沟通，这时候你就需要了解一个CSS3的属性：

box-shadow

先看一下代码(关注加粗字段即可，想体验效果可复制代码贴入记事本中，改变记事本文件格式txt为html，在浏览器中打开即可预览)：

实现投影效果主要就是靠了它

box-shadow: 0px 32px 32px rgba(60,133,253,.22);

注意：这些数值需要按照正确顺序排列，否则效果会不同

其中，水平跟垂直可以用负值来表达相反方向以实现不同效果：

所以如果当你需要实现多层投影时，直接写给前端能让他们秒秒就懂

#Correct-BOX 

{

box-shadow:

0px 4px 4px rgba(60,133,253,.22),

0px 8px 8px rgba(60,133,253,.22), 

0px 16px 16px rgba(60,133,253,.22),

0px 32px 32px rgba(60,133,253,.22),

0px 64px 64px rgba(60,133,253,.22);

}

一共五层，跟PS稿数值、层数一致，相信一般前端们是不会这么去写几层投影的（实际问过前端，看后直接说“有毛用这么多层-_______-`”），所以最好这种比较复杂的投影数值还是写出来的好，保证还原度。

下面这种写法是错误的，box-shadow写一次就行，所有数值写在同一个属性中即可，不然浏览器只是默认显示第一个 

#Correct-BOX /*错误样式*/

{

box-shadow:

0px 4px 4px rgba(60,133,253,.22);

box-shadow:

0px 8px 8px rgba(60,133,253,.22); 

box-shadow: 

0px 16px 16px rgba(60,133,253,.22);

box-shadow:

0px 32px 32px rgba(60,133,253,.22);

box-shadow:

0px 64px 64px rgba(60,133,253,.22);

}

此外，box-shadow还有许多种属性：

box-shadow: 水平 垂直 模糊距离 阴影尺寸 模糊距离 颜色 外阴影改内阴影(inset) 如下图：

所以，一个简单的代码可以实现很多效果，其实没事学习一下代码也是不错的，也便于与前端攻城狮们沟通，看着复杂的效果其实多写几行代码也就实现了，彩虹投影也不是不可以，姿势正确，分分钟搞定。

 谢谢看完

对前端代码有兴趣的可以查看

http://www.w3school.com.cn/cssref/index.asp 

里面有很多基础代码可以学习