如何摆对姿势让前端工程师完美实现一个小阴影？
前端工程狮也是人，了解实现方式也是项目开发中愉快合作的一种方式。
相信有朋友在项目验收UI的时候发现许多样式实现效果差强人意，经过项目后发现，许多都处在沟通的问题上面，在不熟悉代码的情况下与前端沟通页面问题有时候会非常吃力，并不是前端不配合，只是因为你不清楚他们的实现方式，他们也无法认真看你UI稿细节；在项目赶时间的情下，实现效果会更悲剧...所以这时候如果你能把一些看起来稍复杂的UI效果写成css代码的话那就无敌好了。
比如你画了一个多层流比大阴影，希望鼠标滑过实现如下效果...
当你欢快去验收时...结果实际图：
看一下对比:
微小的差别，前端没有像素眼没法很好看出你稿子的效果，但是在咱们这是万万使不得的！怎么办！怎么说！怎么跟前端大哥哥们坦诚以待，理直气壮的表达！
首先咱们实际操作
我先写出两种样式在网页上面的实际效果：
你看,其实是可以很完美实现的，为了更好的沟通，这时候你就需要了解一个CSS3的属性：
box-shadow
先看一下代码(关注加粗字段即可，想体验效果可复制代码贴入记事本中，改变记事本文件格式txt为html，在浏览器中打开即可预览)：
<!DOCTYPE html>
<html>
<head>
<style>
#Correct-BOX,#Flaut-BOX
{
width:200px;
height:120px;
background-color:#3c85fd;
float:left;
margin:20px 40px;
border-radius:20px;
}
p
{
font-size:14px;
line-height:90px;
text-align:center;
color:rgba(255,255,255,0.54)
}
#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);
}
#Flaut-BOX /*这是实现之后的效果*/
{
box-shadow: 0px 32px 32px rgba(60,133,253,.22);
}
</style>
</head>
<body>
<div id="Correct-BOX">
<p>你希望的效果</p>
</div>
<div id="Flaut-BOX">
<p>前端实现的效果</p>
</div>
</body>
</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) 如下图：
所以，一个简单的代码可以实现很多效果，其实没事学习一下代码也是不错的，也便于与前端攻城狮们沟通，看着复杂的效果其实多写几行代码也就实现了，彩虹投影也不是不可以，姿势正确，分分钟搞定。
做示例图好累.....
写的有点废话了请见谅，谢谢看完..
