box-shadow用得好那一定是真爱

1.什么是影?

俗话说有光就会有影，无可否认，光在我们的现实生活中扮演着重要的角色，影也是。光影组合小到化妆，大到美术设计，视觉特效等等，几乎随处可见。

2.阴影的作用有哪些?

凡是化妆的妹子都知道，化妆有一个步骤是补高光和补阴影。可是为什么要这么做呢，原因很简单，高光和阴影都是为了制造视觉效果，前者是为了立体，后者则是修补轮廓。
那么在软件开发过程中，前端工程师也会使用box-shadow来制造视觉效果，从而达到快速聚焦，视觉立体，让用户一眼就能看到某一个区域。

3.关于box-shadow

• 语法：

box-shadow: h-shadow v-shadow blur spread color inset;

• 家族属性如下：

.h-shadow：必填，水平阴影的位置，可给负值。
.v-shadow：必填，垂直阴影的位置，可给负值。
.blur： 选填，阴影模糊扩散程度。
.spread 选填，阴影尺寸。
.color： 选填，阴影的颜色。
.inset： 选填 将外部阴影 (outset) 改为内部阴影。

4.示例效果如下

• html

<div class="box boxShadow"></div>

• css

.box {
width: 300px;
height: 300px;
background: #FFE4C4;
margin: 50px;
}

• 只给h-shadow，v-shadow
  ·h-shadow，v-shadow为正数时

.boxShadow {
box-shadow: 10px 10px;
}

.h-shadow，v-shadow为负数时

.boxShadow {
box-shadow: -10px -10px;
}

• 只给h-shadow，v-shadow，blur，color

.boxShadow {
box-shadow: 10px 10px 20px  #03E9F4;
}

• 只给h-shadow，v-shadow，blur，spread ，color

.boxShadow {
box-shadow: 10px 10px 20px 30px  #03E9F4;
}

• 只给h-shadow，v-shadow，blur，spread，color，inset

.boxShadow {
box-shadow: 10px 10px 20px 30px  #03E9F4 inset;
}

• 只给h-shadow，v-shadow，blur，spread，color， ouset

.boxShadow {
box-shadow: 10px 10px 20px 30px  #03E9F4 inset;
}

5.项目实际使用

6.总结

物体的阴影不仅仅只有黑色，他还有可能是其他色系。我们可以在实际巧妙使用box-shadow来美化我们的页面，以此增加页面的立体感，当box-shadow使用到具体某块功能时可以达到突出重点的作用。一个好的产品功能完备只是一部分，好的视觉效果和交互也是一个重点。其实我个人在开发过程中，也比较注意这一块，尽管我没有什么艺术细胞。我想一个好的开发者一定是懂用户并且关注用户满意度的，当然，这只是我个人的一个想法，不代表所有人。

本文适合初学者，当然，我也乐意接受技术大佬的指教。