阴影和滤镜在一般的情况是为了点缀视觉元素而存在。
阴影三剑客：box-shadow、text-shadow、drop-shadow()；drop-shadow是filter里的滤镜函数。三者都能产生阴影效果。
区分：盒子轮廓产生阴影效果，使用box-shadow，
文本轮廓产生阴影效果，使用text-shadow，
透明图像的非透明部分轮廓产生阴影效果，使用filter：drop-shadow()
具备参数：offsetX：水平偏移，阴影的水平位置（必填），可用任何长度单位，允许负值，正值向右负值向左
offsetY：垂直偏移，阴影的垂直位置（必填），值同上
Blur：模糊半径。阴影的清晰程度（虚色），值同上，值越大边缘越模糊
spread：扩展距离，阴影的实体尺寸（实色），值同上，允许负值，正值扩大，负值缩小，默认为0
color：投影颜色
position：投影位置，outset：阴影显示在外部（默认）；inset：阴影显示在内部
1 box-shadow: offset-x offset-y blur spread color position 2 text-shadow: offset-x offset-y blur color 3 drop-shadow(offset-x, offset-y, blur, color)
多重阴影：可声明多重效果，使用逗号隔开，先声明的阴影层叠等级最高，会遮挡后面声明的阴影，排列方向有position决定，后面声明的阴影接着上一个排列下去，此时需将blur或者spread增大，防止先声明的阴影遮挡。
定向阴影：巧妙声明spread为blur的复制可产生定向阴影，这样是为了抵消阴影的扩散，正负决定了偏移方向。
offset-x：正值向右负值向左
offset-y：正值向下负值向上
模拟边框：border参与到盒模型的计算和布局中占据了一定的位置，若希望不纳入盒模型的计算和布局，可用outline替代border，box-shadow也能替代border产生边框的效果，并且不纳入盒模型的计算和布局，阴影不影响布局，可能会阀盖其他节点，阴影不能触发滚动条，也不会增加滚动区域大小。
blur渲染阴影是虚色，而spread渲染阴影是实色，将其余的参数声明为0，spread声明为正值，如：box-shadow:0 0 0 10px #eee；可以结合border-radius让阴影变成圆角。
例子：彩虹色带
1 <div class="bruce flex-ct-x" data-title="使用box-shadow描绘彩虹色带(多重阴影实现)"> 2 <div class="rainbow-bar bar-1"></div> 3 <div class="rainbow-bar bar-2"></div> 4 </div>
1 $rainbow: 0 0 0 8px #f66 inset, 2 0 0 0 16px #f90 inset, 3 0 0 0 24px #ff3 inset, 4 0 0 0 32px #3c9 inset, 5 0 0 0 40px #9c3 inset, 6 0 0 0 48px #09f inset, 7 0 0 0 56px #66f inset; 8 .rainbow-bar { 9 width: 250px; 10 &.bar-1 { 11 overflow: hidden; 12 position: relative; 13 height: 125px; 14 &::after { 15 display: block; 16 border-radius: 100%; 17 width: 100%; 18 height: 200%; 19 box-shadow: $rainbow; 20 content: ""; 21 } 22 } 23 &.bar-2 { 24 margin: 125px 0 0 50px; 25 border-radius: 100%; 26 height: 250px; 27 box-shadow: $rainbow; 28 clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%); 29 } 30 }
滤镜：和PS里面的滤镜效果是一样的，一样理解
属性：blur()：模糊值，可用任何长度单位，0为显示原图，越大越模糊
brightness()：亮度，百分比，可用0~1代替，0：全黑；1为显示原图
contrast()：对比度，百分比，可用0~1代替，0：全黑；1为显示原图
drop-shadow()：阴影
grayscale()：灰度，百分比，可用0~1代替，0：显示原图；1为全灰
hue-rotate()：色相翻转，角度，0为显示原图，0~360deg减弱原图色彩
invert()：反相，百分比，可用0~1代替，0为显示原图，1为完全饭庄原图色彩
opacity()：透明度，0：显示透明，1：显示原图
saturate()：饱和度，0：完全不饱和原图，1显示原图
sepia()：褐色，0：显示原图，1显示为褐
例子：悼念模式一行代码全站进入悼念模式，把<html>替换成<html style="filter:grayscale(1)">即可，简单粗暴。当然核心代码是filter:grayscale(1)，意思是把当前节点及其后代节点设置成100%的灰度模式。