说到页面效果，阴影是很小的元素，很少被提及。
当然，面试的时候，还是有人会问你：扩展半径和模糊半径。
在设计师的眼里，也还是会纠结：范围太大、颜色太重之类的问题。
我们简单列一下。
最常用——box-shadow
box-shadow说来很简单。
代码如下：
.box-shadow{
width: 50px;
height: 50px;
background: rgb(123, 199, 123);
border-radius: 4px;
box-shadow: 0 3px 10px 1px rgba(0, 0, 0, .5);
}
效果如下：
这是最常规的实现，我们可以任意修改阴影的偏移值和半径、颜色，达到我们想要的效果。
但有时我们会遇到这样的效果，
乍一看，也很普通，但你会发现，当我们按照常规写法去写阴影的时候，它会出现三种可能情况：
- 偏移量很小，四边都有阴影
- 单侧偏移较大，三边有阴影
- 两侧偏移都达到一定值，相邻两边有阴影，对边没有
好像都不是这张图的效果？它仅有一边有阴影，何解？
如果你从未遇到过这种需求，可能就会打个问号，不卖关子，上关键代码：
.box-shadow-single{
box-shadow: 0 8px 5px -5px rgba(0, 0, 0, .7);
}
可以看到，我们将阴影的扩展半径写成了负值。仅此而已么，它是怎么做到的呢？
不妨来看看浏览器是怎么制造阴影的。我们把代码改成这样：
box-shadow: 0px 55px 0px 0px rgba(0, 0, 0, .7);
盒子背后的秘密被暴露了出来，
哇偶，原来它只是在我们盒子的背后绘制了一个一模一样的形状：
- 改变模糊半径，它会从边缘到中心逐渐变模糊
- 改变扩展半径，会改变它的大小
看到这里，你应该明白了什么，从上图可看出，阴影的初始大小跟元素完全吻合，那么，给予它一个单边的偏移值，再给它负的扩展半径，它就能成为一个——三边都躲在元素背后，只有一边露出来的单边阴影~
(发现长得有点像U盘，哈哈)
你一定想尝试，模糊半径负值会怎样？嗯，它没了…
次常用——text-shadow
说text-shadow次常用，是因为它涉及到一定特效，常规字体一般是不需要的，什么样的效果呢？比如：
这样的效果在一些活动页是少不了的，因为纯色会显得太素，视觉效果适当地丰富，能使得用户更兴奋。实现代码如下：
.textshadow{
color: #FFF;
text-shadow: 0 0 2px #000,0 0 10px gold;
}
当然，这只是小试牛刀，不过，我们可以看出，text-shadow只有四个值供设置，分别是X、Y方向的偏移和模糊半径、色值。还反应另一点是，可以写多重阴影的效果，这就为我们创造出更多效果提供了可能。譬如：
3D
text-shadow: 0 1px #808d93,
-1px 0 #cdd2d5,
-1px 2px #808d93,
-2px 1px #cdd2d5,
-2px 3px #808d93,
-3px 2px #cdd2d5,
-3px 4px #808d93,
-4px 3px #cdd2d5,
-4px 5px #808d93;
火焰
text-shadow: 0 0 20px #fefcc9,
10px -10px 30px #feec85,
-20px -20px 40px #ffae34,
20px -30px 35px #ec760c,
-20px -40px 40px #cd4606,
0 -50px 65px #973716,
10px -70px 70px #451b0e;
你可能会说，这样的场景很少，不实用。我同意，但创意并不一定很常用，还可以体现可能性。
drop-shadow，拯救不开心
主角终于登场，怎么叫不开心？常规方法突然不适用，一筹莫展的时候。
先来看一个之前分享过的效果——渐变字体。
代码：
background: linear-gradient(to bottom, #f44e30 0%,#29db35 100%);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
效果：
这个时候，我们可能还需要给它加个投影，就像这样
你会想到什么呢？box-shadow？
好尴尬…
text-shadow？
这是刚从煤窝里爬出来吗？
为什么？我们再次揭开谜底吧。
将代码改一下
text-shadow: 0 10px 0px rgba(0,0,0,.9);
我们看到似曾相识的一幕
跟box-shadow类似，text-shadow在字体本身的位置上，绘制了一个一样形状的图层，只不过，这里有个层级的问题，正常情况下，阴影在字体后，而当我们把字体填充色设置为transparent，用它来裁剪背景时，阴影就盖到了背景之上，这样就得不到我们想要的效果。
所以，无解？
有个人不答应——drop-shadow
试一下，将代码改成
filter:drop-shadow(0 6px 2px rgba(0,0,0,.9));
nice！
故事到这里，当然没有结束。
这里的阴影如果没有实现，只能算小挫折，大不了咱不要了…（如果设计师放过你的话~）
曾经的我呢，也仅仅是知道了这个方法可以解决上面的问题，并未深究，直到有一天，还是先看问题：
这个效果你一定做过，也不难，不过这个呢？
对，只是加了个阴影，但是，通过前面的内容我们知道，这个阴影肯定不能用box-shadow，它将会是这样：
甚至有看到很多开源的库都是这样写的，不知出于什么考虑。
我们曾经用drop-shadow解决了上面的问题，可以故技重施吗？答案是：可以。
只需要在气泡容器上加这行样式即可：
filter:drop-shadow(0 4px 2px rgba(0,0,0,.4));
那么，它是怎么做到的？可以来体会一句话：
box-shadow会应用到元素矩形的边框盒子，而drop-shadow()滤镜会应用到元素透明的轮廓。应用范围包括阿尔法透明度，保持阴影与轮廓吻合，或者给通过clip-path剪切的元素添加阴影。
慢慢体会，对于上面发生的一切，你可能就豁然开朗了。
当然，你不要犯我犯过的错，不能点到为止，你需要明白的是，它不止能解决这个问题，而是能够应对这一类问题，适用于几乎所有不规则形状的投影，相信你会遇到的~
除此之外，它还有另一个优势，大家知道，box-shadow的渲染比较耗浏览器的性能，特别是在有动画的时候，drop-shadow很好地缓解了这个问题，所以，它十分值得被你选用。
那么drop-shadow是不是可以替代box-shadow呢？可惜并不能。相比box-shadow，它少了两项技能：
1、扩展半径，它的效果总会是模糊的，无法绘制出box-shadow那种实线
2、无法应用多重阴影
尽管如此，它已经足够出色了不是吗？
你一定还有更多技巧和创意，欢迎交流！~
