第一次为人，迷茫，恐惧，压抑难免，不要想太多。

1,background-image类型

1).线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向
2).径向渐变（Radial Gradients）- 由它们的中心定义
3).重复（repeating-Radial Gradients）（repeating-Radial Gradients）

加上 background-size 为固定宽度平铺
否则线性渐变

2,方向

1，to right,to left,to top,to bottom, to top left ........
例：background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
2，角度，如下
例：background-image: linear-gradient(-90deg, red, yellow);

角度图

3，使用透明度

transparent
background: white;
background-image: linear-gradient(90deg, rgba(180, 200, 0, 0.5) 60%, transparent 0),
                  linear-gradient(rgba(200, 0, 0, .5) 50%, transparent 0);
background-size: 30px 30px;
//transparent 0 透明

渐变网格.jpg

4,波点

.boDian {
            width: 900px;
            height: 900px;
            background: #655;
            background-image: radial-gradient(tan 30%, transparent 0),
                radial-gradient(tan 30%, transparent 0);
            background-size: 90px 90px;
            background-position: 0 0, 45px 45px;
        }

波点.jpg

5,scss函数封装

@mixin boDian($size,$dot,$base,$accent){
            background:$base;
            background-image: radial-gradient($accent $dot, transparent 0),
                radial-gradient($accent $dot, transparent 0);
            background-size: $size $size;
            background-position: 0 0, $size/2 $size/2;
        }
 //引用
        @include boDian(30px,30%,#65,tan)

6，切角效果

.boy {
        width: 800px;
        height: 494.4px;
        background: linear-gradient(-45deg, transparent 30px, #655 0) right,
            linear-gradient(45deg, transparent 30px, #58a 0) left;
        background-size: 50% 100%;
        background-repeat: no-repeat;
    }

切角.png

6.1圆角效果

.boy {
        width: 800px;
        height: 494px;
        background: radial-gradient(circle at top left, transparent 45px, red 0) top left,

            radial-gradient(circle at top right, transparent 45px, green 0) top right,

            radial-gradient(circle at bottom right, transparent 45px, teal 0) bottom right,

            radial-gradient(circle at bottom left, transparent 45px, pink 0) bottom left;

        background-size: 50% 50%;

        background-repeat: no-repeat;
    }

切圆.png

7，filter

高斯模糊:filter: blur(5px);
图片变亮:filter: brightness(200%);
图像的对比度:filter: contrast(200%);
阴影效果:filter: drop-shadow(8px 8px 10px red);
灰度图像:filter: grayscale(50%);
给图像应用色相旋转:filter: hue-rotate(90deg);
反转输入图像: filter: invert(100%);
透明程度:filter: opacity(30%);
像饱和度:filter: saturate(800%);
将图像转换为深褐色: filter: sepia(100%);
......