单侧投影

先看示例

See the Pen shadow1 by ShiLei (@nervouself) on CodePen.

单侧投影中书上说模糊半径4px，相应的扩张半径也要减小4px，但实际上测试减小2px就可以了，可以看到示例中我模糊半径设了10px，但扩张半径只减小了5px，已经是单侧效果了。



临边投影不是要像书上说的要把扩张半径设为模糊半径的一半，因为还有偏移量的因素，只要保证有两边被盖住就可以了，我示例中没有设置扩张半径，纯靠偏移形成了邻边投影效果。

双侧投影就是单侧投影重复两次，我这边还是只把扩张半径设置成模糊半径的一半。

## 滤镜投影

See the Pen shadow2 by ShiLei (@nervouself) on CodePen.

这效果没话说，吊炸天。

这兼容性也没话说，吊炸天。

另外还有个svg滤镜，兼容性好一点，IE10+。

染色

上演示，可以鼠标移上去看效果，加载比较慢，稍等。

See the Pen filter1 by ShiLei (@nervouself) on CodePen.

首先采用了最常用手法，用半透明盖一层，简单易用有效果。

接下来就是滤镜的方案，第二个sepia()是一种降低饱和度的滤镜，好像褪色的橘黄色效果，比较好看。自己试了试取值是0.1 - 1。
第三个saturate()饱和度，取值随便，试了试原本效果的参数是1。
第四个是hue-rotate()是调色相的，色相嘛，具体是啥不知道，不过用PS的时候是和饱和度放一起的，差不多的东西吧。。。具体试了试，就是偏移RGB的效果，hue-rotate(180deg)就是反色啦！
第五个就是上面这三个都用上，参数是书上的参数。
第六个是混合模式，mix-blend-mode是给整个元素使用混合模式，background-blend-mode是给每层背景单独使用混合模式，luminosity参数是保留上层亮度，混合下层色相饱和度。示例中采用单独背景混合模式，因为可以适用动画。

这章厉害了

这次这些以前真的没有研究过，效果强大且配置简单，就是兼容性太差了，好气哦，可是还是要保持围笑(●’◡’●)