HSL色彩模型
- 色相（HUE）：在基础色轮上分布的颜色，也称为纯色，纯色是不含黑、白、灰的颜色。
- 饱和度（SATURATION）：是指颜色的鲜亮程度，在纯色中加入灰色，会降低色彩的饱和度。100%是纯色，没有灰色阴影。50%是50%的灰色，0%是完全灰色。下图是饱和度从100%到0%的变化。
- 明暗度（LIGHTNESS）：是指颜色的色彩的明暗程度，在纯色中加入黑色或白色，会改变颜色的明暗度。其中0%表示全暗（黑色），100%表示全明（白色），50%是即不明也不暗。
HSL色彩模型就是色相、饱和度和明暗度三者混合组成的颜色模型。表示为 hsla(hue, saturation, lightness)。
filter基础使用
filter CSS属性将模糊或颜色偏移等图形效果应用于元素。滤镜通常用于调整图像，背景和边框的渲染。
filter属性的含义
brightness()让图像更明亮或更暗淡，0%将创建全黑图像，100%展示原图，大于100%展示更明亮的图片效果。contrast()增加或减少图像的对比度，值是0%图像全灰图像，没有对比度。100%展示原图，大于100%展示对比度更高的图片效果。saturate()超饱和或去饱和输入的图像，值为0%则是完全不饱和，完全转为灰度图像，100% 展示原图，大于100% 则有更高的饱和度。grayscale()改变图像灰度，值在0%到100%之间，值为0%展示原图，值为100%则完全转为灰度图像。blur()模糊图像。传入值单位为pxdrop-shadow()给图片添加阴影，与box-shadow的属性值一样。hue-rotate()改变图整体色调，angle设定图像会被调整的色环角度值。值为0deg展示原图，大于360deg相当于又绕一圈。invert()反转图像颜色,值在0%和100%之间,100%的价值是完全反转。值为0%则图像无变化。opacity()改变图像透明度，值在0%和100%之间，值为0%则是完全透明，值为100%则图像无变化。sepia()将图像转为棕褐色，值在0%到100%之间，值为100%则完全是深褐色的，值为0%图像无变化。
filter函数使用方法
可以使用单个滤镜函数，也可是同时使用多个滤镜函数。
/* <filter-function> values 使用单个滤镜*/
filter: blur(5px);
/* Multiple filters 使用多个滤镜*/
filter: contrast(175%) brightness(3%);
/* Use no filter 不使用滤镜 */
filter: none;
filter各属性值效果
filter的应用实例
不规则投影
box-shadow能够完美地给矩形或者border-radius生成的形状增加投影效果。但是当元素添加了伪元素或者半透明的装饰后，box-shadow会忽视透明的部分，导致投影效果不佳。
box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5**)**
可以使用drop-shadow()滤镜为半透明图片、伪元素等添加阴影效果。**请记住drop-shadow会给任何非透明部分加上阴影。
filter: drop-shadow(3px 3px 3px rgba(0, 0, 0, 0.5));
染色效果
把多种滤镜组合起来，达到染色效果。
- 使用sepia(1)降低饱和度的橙黄色效果，几乎所有的像素都收敛至35-40.
- 使用saturate(200%)滤镜来提高像素的饱和度。
- 使用hut-rotate(295)滤镜改变主色调，比如想要主色调是hsl(335, 100%, 50%),40改变为335,色相偏移295度，即hue-rotate(295)
毛玻璃效果
codepen.io/denghuijie/…
由于我们不能直接对元素本身进行模糊处理，就对一个伪元素进行处理，然后将其定位到元素的下层，将伪元素的背景和body背景无缝重合，对伪元素进行模糊处理。
- 首先添加一个伪元素，将其绝对定位，并把所有偏移量置为0，这样就可以将它完整的覆盖到.content上了。
.content::before{
position: absolute;
content: '';
top: 0;
left: 0;
right: 0;
bottom: 0;
}
- 将伪元素的背景设为和body元素背景完全重叠。
body,
.content::before{
background: url(bg.jpg);
background-attachment: fixed;
}
- 伪元素添加模糊属性,由于模糊效果在边缘处会逐渐消退，需要让伪元素相对宿主元素的尺寸向外扩大至少20px;同时宿主元素把多余的模糊区域裁剪掉。
.content{
overflow: hidden;
}
.content::before{
filter: blur(30px);
margin: -50px;
}
