CSS阴影、滤镜，让视觉更有⽴体感！
阴影和滤镜在⼀般的情况是为了点缀视觉元素⽽存在。
阴影三剑客：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：阴影显⽰在内部
1box-shadow: offset-x offset-y blur spread color position
2text-shadow: offset-x offset-y blur color
3drop-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%);box shadow怎么设置
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 >即可，简单粗暴。当然核⼼代码是filter:grayscale(1)，意思是把当前节点及其后代节点设置成100%的灰度模式。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。