关于滤镜

Posted 2021-03-02 xiaoaitongxue

1.模糊效果

            /* 0是不模糊，值越大越模糊 */
            filter: blur(10px);

2.灰度

            /* 灰度，值是0-1 */
            /* filter: grayscale(1); */

3.褐色

            /* filter: grayscale(1); */
            /* 褐色，值是0-1 */
            /* filter: sepia(1); */

4.反色

            /* 反色，取值0-1 */
            /* filter: invert(1); */

5.亮度

            /* 亮度，默认是1 */
            /* filter: brightness(2); */

6.阴影

           /* 与盒子阴影的区别是：盒子是是给整个盒子加阴影，而滤镜阴影是给非透明的元素加阴影 */
           filter: drop-shadow(5px 5px 5px #666);

7.对比度

            /* 对比度，默认是1，若果是0图片全黑 */
            /* filter: contrast(1); */

8.饱和度

            /* 饱和度，默认是1 值越大，图片中每个颜色的对比越明显*/
            filter: saturate(5);