最近一个新的项目，CSS-Inspiration，挖掘了其他很多有关 CSS 阴影的点子，是之前的文章没有覆盖到的新内容，而且有一些很有意思，遂打算再起一篇。
本文的题目是 CSS 阴影技巧与细节。CSS 阴影，却不一定是box-shadow与filter:drop-shadow，为啥？因为使用其他属性也可以模拟阴影，而且是各种各样的阴影。下面且听我娓娓道来~
先说单侧投影，关于box-shadow，大部分时候，我们使用它都是用来生成一个两侧的投影，或者一个四侧的投影。如下：
继续，如果阴影的模糊半径，与负的扩张半径一致，那么我们将看不到任何阴影，因为生成的阴影将被包含在原来的元素之下，除非给它设定一个方向的偏移量。所以这个时候，我们给定一个方向的偏移值，即可实现单侧投影：
很明显，0 = -0，所以当box-shadow的模糊半径和扩张半径都为 0 的时候，我们也可以得到一个和元素大小一样的阴影，只不过被元素本身遮挡住了，我们尝试将其偏移出来。
额，确实好像没什么用。不过我们注意到，box-shadow是可以设置多层的，也就是多层阴影，而且可以进行过渡变换动画（补间动画）。但是background-image: linear-gradient()，也就是渐变背景是不能进行补间动画的。
这又扯到哪里去了。好我们回来，利用上面的特性，我们可以利用box-shadow实现原本只能利用渐变才能实现的背景图：
为什么选择更为复杂的box-shadow呢？因为它可以进行补间动画，像这样，这是使用渐变做不到的：
这个说法很奇怪，阴影的出现，本就是为了让原本的元素看起来更加的立体，那这里所谓的立体投影，是个怎么立体法？
这里所谓的立体投影，并不一定是使用了box-shadow、text-shadow或者drop-shadow，而是我们使用其他元素或者属性模拟元素的阴影。而这样做的目的，是为了能够突破box-shadow这类元素的一些定位局限。让阴影的位置、大小、模糊度可以更加的灵活。
上图 div 只是带了一个非常浅的bos-shadow，看上去和立体没什么关系，接下来，我们通过 div 的伪元素，给它生成一个和原图边角形状类似的图形，再通过 transform 位移一下，可能是这样：
OK，最后对这个用伪元素生成的元素进行一些虚化效果（filter或者box-shadow都可以），就可以实现一个边角看起来像被撕开的立体效果：
好吧，手写真的太慢了，还容易出错，所以这里我们需要借助一下 SASS/LESS 帮忙，写一个生成 50 层阴影的function就好，我们每向右和向下偏移 1px，生成一层 text-shadow：
问题出在哪里呢，阴影其实是存在明暗度和透明度的变化的，所以，对于渐进的每一层文字阴影，明暗度和透明度应该都是不断变化的。这个需求，SASS 可以很好的实现，下面是两个 SASS 颜色函数：
当然，使用 CSS 生成立体文字阴影的方法还有很多，下面再贴出一例，使用了透明色叠加底色的多重线性渐变实现的文字立体阴影，感兴趣的同学可以去看看具体实现：
上面提到了通过多层阴影叠加实现文字的立体阴影。运用在 div 这些容器上也是可以的。当然这里还有一种挺有意思的方法。假设我们，有一个矩形元素，希望给他添加一个长投影，像下面这样：
要生成这种长投影，刚刚说的叠加多层阴影可以，再就是借助元素的两个伪元素，其实上面的图是这样的：
关键点在于，我们通过对两个伪元素的transform: skew()变换以及从实色到透明色的背景色变化，实现了长投影的效果：
通常而言，我们生成阴影的方式大多是box-shadow、filter: drop-shadow()、text-shadow。但是，使用它们生成的阴影通常只能是单色或者同色系的。
这个真不行，但是通过巧妙的利用filter: blur模糊滤镜，我们可以假装生成渐变色或者说是颜色丰富的阴影效果。
其简单的原理就是，利用伪元素，生成一个与原图一样大小的新图叠加在原图之下，然后利用滤镜模糊filter: blur()配合其他的亮度/对比度，透明度等滤镜，制作出一个虚幻的影子，伪装成原图的阴影效果。
好，上文主要是一些实现各种阴影的方法，接下来是效果篇。先来看看使用box-shadow实现的一些灯光效果。
这个效果也叫 Neon，Codepen 上有很多类似的效果，本质上都是大范围的box-shadow过渡效果与白色文字的叠加：
先来看这个，单个标签实现仿抖音 LOGO，当然由于限定在一个元素，所以细节方面还是有很多瑕疵。
想着仿的缘由是某天刷抖音的时候看见这个 LOGO 的一时兴起，CSS 写多了，看见什么东西都会条件反射的想这个能不能用 CSS 实现。
其实很简单，主体其实是由3个颜色不同类似 J 的形状组成。而单独拎出一个，又可以把它分成四分之三圆、以及㇏组成。
正好，一个元素加上它的两个伪元素，刚好可以凑成这三个形状，我们试着实现以下，简单 CSS 代码如下：
接下来就是轮到filter: drop-shadow()登场，它可以在元素呈现之前，为元素的渲染提供一些效果，最常见的也就用它渲染整体阴影。我们通常会用它来实现对话框的小三角与整个对话框的阴影效果，像下面这样，左边是使用drop-shadow的效果，右边是使用普通box-shadow的效果。
OK，回到我们正文，下面我们使用filter: drop-shadow()生成它的第一层左边的蓝色阴影，添加在主体 div：
好，接下来我们只需要再添加一层红色filter: drop-shadow()在右侧就大功告成！
等等！哪里不对，上面我也有提到过，和box-shadow一样，text-shadow是可以叠加多层的！但是对于单个元素而言，drop-shadow的话就只能是一层。
关于上述抖音 LOGO，经友人提醒，其实应该只是两个类 J 形的形状重叠在一起，重叠部分为白色，非重叠部分为各自原色。
当初想复杂了，这个效果我尝试了一下，使用 CSS 的混合模式mix-blend-mode也是可以实现的，下面给出实现方法如下，感兴趣的同学可以看看：
我在 Git 上开了个仓库，CSS-Inspiration，以分类的形式，展示不同 CSS 属性或者不同的课题使用 CSS 来解决的各种方法。更多有意思的 CSS 技巧可以在这里找到，而且是每日更新。
感谢耐心读完。更多精彩 CSS 技术文章汇总在我的Github -- iCSS，持续更新，欢迎点个 star 订阅收藏。
如果还有什么疑问或者建议，可以多多交流，原创文章，文笔有限，才疏学浅，文中若有不正之处，万望告知。
