CSS揭秘（四视觉效果）

知识点：

text-shadow为文字添加阴影。可以为文字与text-decorations添加多个阴影，阴影值之间用逗号隔开。每个阴影值由元素在X和Y方向的偏移量、模糊半径和颜色值组成（/* offset-x | offset-y | blur-radius | color */）。当所给的阴影大于一个时，阴影应用的顺序为从前到后, 第一个指定的阴影在顶部.

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

一、投影

box-shadow可以在同一个元素上设置多个阴影效果，并用逗号将他们分隔开。该属性可设置的值包括阴影的X轴偏移量、Y轴偏移量、模糊半径、扩散半径和颜色。 如果元素同时设置了 border-radius属性 ，那么阴影也会有圆角效果。 box-shadow: 0 5px 4px -4px black;  单侧投影 box-shadow: 3px 3px 6px -3px black; 邻边投影 box-shadow: 5px 0 5px -5px black,-5px 0 5px -5px black; 双侧投影 二、不规则投影 当我们想给一个矩形或其他能用 border-radius 生成的形状（在“自适应的椭圆”一节中可以看到一些示例）加投影时，box-shadow 的表现都堪称完美。但是，当元素添加了一些伪元素或半透明的装饰之后，它就有些力不从心了，因为 border-radius 会无耻地忽视透明部分。   通过 CSS 美化过的元素无法完美地渲染 box-shadow；

解决办法：滤镜效果规范：

引入了一个叫作 filter 的新属性，这个属性也是从 SVG 那里借鉴过来的。尽管 CSS 滤镜基本上就是 SVG 滤镜，但我们并不需要掌握任何SVG 知识。相反，只需要一些函数就可以很方便地指定滤镜效果了，比如blur()、grayscale() 以及我们需要的 drop-shadow() ！如果你喜欢，甚至可以把多个滤镜串连起来，只要用空格把它们分隔开就可以了， filter: blur() grayscale() drop-shadow(); drop-shadow() 滤镜可接受的参数基本上跟 box-shadow 属性是一样 的，但不包括扩张半径，不包括 inset 关键字，也不支持逗号分割的多层投 影语法。 如下： filter: drop-shadow(2px 2px 10px rgba(0,0,0,.5));达到效果

 三、染色效果

背景：HSL 色彩模型，background-size

滤镜是可动画的，而混合模式则不是

1.使用滤镜：

第一个滤镜是 sepia()，它会给图片增加一种降饱和度的橙黄色?色效果，几乎所有像素的色相值会被收敛到 35~40 用 saturate() 滤镜来给每个像素提升饱和度 hue-rotate() 滤镜，把每个像素的色相以指定的度数进行偏移。 img { transition: .5s filter; filter: sepia(1) saturate(4) hue-rotate(295deg); } img:hover, img:focus { filter: none; }  

2.混合模式

“混合模式”控制了上层元素的颜色与下层颜色进行混合的方式。用它来实现染色效果时，需要用到的混合模式是 luminosity。这种 luminosity 混合模式会保留上层元素的 HSL 亮度信 息，并从它的下层吸取色相和饱和度信息。如果在下层准备好我们想要的主色调，并把待处理的图片放在上层并设置为这种混合模式，那本质上不就是在做染色处理吗？    要对一个元素设置混合模式，有两个属性可以派上用场：mix-blendmode 可以为整个元素设置混合模式，background-blend-mode 可以为每层背景单独指定混合模式。这意味着，如果用这个方案来处理图片，我们实际上有两种选择。不过这两者各有所短。 第一种选择：需要把图片包裹在一个容器中，并把容器的背景色设置为我们想要的主色调。 a { background: hsl(335, 100%, 50%); } img { mix-blend-mode: luminosity; } 第二种选择：不用图片元素，而是用