box-shadow的妙用

前端开发过程中，box-shadow经常被用来作为“加特技”的手段，使一个盒子看起来有立体感。今天我们就来盘点一下box-shadow到底有哪些基础用法和独特用法。

少啰嗦先看定义

首先来看MDN是怎么简述box-shadow的

box-shadow属性用于在元素的框架上添加阴影效果。你可以在同一个元素上设置多个阴影效果，并用逗号将他们分隔开。该属性可设置的值包括阴影的X轴偏移量、Y轴偏移量、模糊半径、扩散半径和颜色。

/* 投影是否向内(可选，默认向外) x轴偏移量 y轴偏移量 模糊范围(可选) 扩散范围(可选) 颜色(可选) */
box-shadow: [inset] <offset-x> <offset-y> [<blur-radius> = 0] [<spread-radius> = 0] [<color>]

这里offset-x、offset-y、blur-radius、spread-radius都是css长度值，其中blur-radius是不能为负的。 box-shadow默认值是none，非继承属性。

容易忽略或容易出错的点

当给出两个、三个或四个 css长度值时：
- 如果只给出两个值, 那么这两个值将会被当作 <offset-x><offset-y> 来解释。
- 如果给出了第三个值, 那么第三个值将会被当作<blur-radius>解释。
- 如果给出了第四个值, 那么第四个值将会被当作<spread-radius>来解释。
内投影的位置：在边框之内 (即使是透明边框）、在背景之上、在内边距之上、在内容之下。
外投影的位置：在背景之下、在外边距之上。
当设定多组box-shadow值，先给定的值叠在上层，后给定的值插在下层。

用法

向外建立投影，增加悬空效果

卡片悬浮

<div class="card card1"></div>

<style>
.card {
  background: #fff;
  border-radius: 2px;
  height: 300px;
  width: 300px;
  margin: 1rem;
  position: relative;
}
.card-1 {
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}
.card-1:hover {
  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}
</style>

3D卡片

<div class="card"></div>

<style>
.card {
  padding: 30px;
  background: white;
  border-radius: 5px;
  width: 400px;
  height: 200px;
  margin: auto;
  box-shadow: 0 0 5px rgba(0,0,0,.1);
  position: relative;
}
.card:after {
  content:" ";
  position: absolute;
  width: 100%;
  height: 10px;
  border-radius: 50%;
  left:0;
  bottom:-50px;
  box-shadow: 0 30px 20px rgba(0,0,0,.3);    
}
</style>

按钮

<a class="button"><span>Click Me!</span></a>

<style>
.button {
  display: inline-block;
  color: #eff6ec;
  text-decoration: none;
  cursor: pointer;
  border-radius: 8px;
  box-shadow: 0 8px 0 #004d2f, 0 10px 15px rgba(0,0,0,.35);
  transition: box-shadow 0.2s ease-in-out;
}
.button span {
  display: inline-block;
  font-size: 2em;
  font-family: arial;
  padding: .625em 1em;
  background: #008752;
  background-image: linear-gradient(#008752, #007849);
  border-top: 1px solid rgba(255,255,255,.2);   
  border-bottom: 1px solid rgba(0,0,0,.2);
  border-radius: 8px;
  transition: transform 0.2s ease-in-out; 
}
.button:active {
  box-shadow: 0 8px 0 #004d2f, 0 7px 10px rgba(0,0,0,.25);
}
.button:active span {
  transform: translateY(4px);
}
</style>

光环

<span class="pulse"></span>

<style>
.pulse {
  margin:100px;
  display: block;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #cca92c;
  cursor: pointer;
  box-shadow: 0 0 0 rgba(204,169,44, 0.4);
  animation: pulse 2s infinite;
}
.pulse:hover {
  animation: none;
}
@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(204,169,44, 0.4);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(204,169,44, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(204,169,44, 0);
  }
}
</style>

可以对外投影做出如下总结

原地投影（没有x、y的偏移）情况下，结合模糊，多数是做出光晕效果、环形效果
偏移投影 + 模糊，多数可以构造出立体效果、悬浮效果
偏移投影 + 不模糊（实色的投影），多数可以构造出强力的视差效果

向内建立投影，增加塌陷效果

滚动条

<div class="scrollbar" id="style-1">
  <div class="force-overflow"></div>
</div>

<style>
#style-1::-webkit-scrollbar-track {
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	border-radius: 10px;
	background-color: #F5F5F5;
}

#style-1::-webkit-scrollbar {
	width: 12px;
	background-color: #F5F5F5;
}

#style-1::-webkit-scrollbar-thumb {
	border-radius: 10px;
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
	background-color: #555;
}
.scrollbar {
	height: 300px;
	width: 65px;
	background: #F5F5F5;
	overflow-y: scroll;
}
.force-overflow {
	min-height: 450px;
}
</style>

按钮组、工具栏

<div class="toolbar">
  <div class="btn"></div>
  <div class="btn inset"></div>
  <div class="btn"></div>
</div>

<style>
.toolbar {
  display: flex;
}
.btn {
  width: 60px;
  height: 60px;
  background: #fff;
}
.btn.inset {
  border: 1px solid rgba(0,0,0,.2);
  border-bottom: 1px solid rgba(0,0,0,.1);
  box-shadow: inset 0 1px 6px rgba(0,0,0,.3);
}
</style>

关于内外投影，诠释最好的案例就是前一阵非常火的 Neumorphism 拟态格风设计：利用光影在平面上表现空间关系。

这里有一个playground，可以通过动态调整参数的方式来感受box-shadow结合背景色创造出的魔力。

复制形状

可以设置多组值这个用法可以说是box-shadow最有趣的用法。由于投影形状是基于盒子形状的，所以换句话说，设置多组值就意味着复制形状，而且复制出来的结果自始至终只有一个盒子(元素)。

理论上设置多少组值是没有限制的，所以就出现使用box-shadow来画画的骚操作，因为本质上数字图像就是一个个带颜色的小方块。但是大量值的设置会对浏览器造成灾难式打击，所以画蒙娜丽莎这种操作就别用box-shadow了。

由于box-shadow可复制、可叠放，所以几份相同的图形也能组合出生动的图案。

云朵

<div class="cloud"></div>

<style>
  .cloud {
    width: 50px;
    height: 50px;
    background: #fff;
    border-radius: 50%;
    box-shadow:
      65px -15px 0 -5px #fff,
      25px -25px #fff,
      30px 10px #fff,
      60px 15px 0 -10px #fff,
      85px 5px 0 -5px #fff,
      35px -35px #c8c8c8,
      66px -27px 0 -5px #c8c8c8,
      91px -10px 0 -8px #c8c8c8;
  }
</style>

彩虹

<div class="rainbow"></div><style>  .rainbow {    transform: translate(-50%, -50%) rotate(45deg);    width: 70px;    height: 70px;    border-radius: 100px 0 0 0;    box-shadow:       -2px -2px 0 1px #F44336,      -4px -4px 0 3px#FF9800,      -6px -6px 0 5px#FFEB3B,      -8px -8px 0 7px#8BC34A,      -10px -10px 0 9px#00BCD4,      -12px -12px 0 11px#2196F3,      -14px -14px 0 13px rgb(126, 124, 126);  }</style>

以后再有一些由基础图形组成的图案，在决定使用svg或其他资源之前，先考虑是否可以用box-shadow实现。

总结

box-shadow用法的核心思路基本都可以划分到以上三类。虽然创作思路很简单，但真正需要多写多感受的是box-shadow值的设置，就好比绘画过程中对色彩配比、笔墨轻重的掌握是需要日积月累的经验才能摸清的。