CSS3图解颜色渐变

渐变产生的是图像，所以需要使用 background

线性渐变

linear-gradient（方向，开始颜色，位置，颜色2，位置，颜色3，位置…）
方向：
to top：0deg
to right：90deg
to bottom：180deg-----默认值
to left：270deg

下面附上一张关于角度的图（源于网络）

下面给盒子添加宽高和 to right（向右）的渐变

background: linear-gradient(to right,red,blue);

下面是 to right bottom 即 45deg

background: linear-gradient(45deg，yellow 0%，red 50%，blue 50%，blue 100%);

径向渐变

radial-gradient（形状，大小，座标，颜色1，颜色2…）
形状shape：默认值ellipse（椭圆形）
circle（圆形） ---->产生正方形的渐变色
ellipse（椭圆形） ---->适配当前的形状，如果是正方形的容器，两者效果一样，如果宽高不一样，默认效果切换到ellipse
大小size(渐变中心点：与最近（远）边有相切；与最近 （远）角有相交)：默认是最远角---->farthest-corner
closest-side ---->最近边
farthest-side ---->最远边
closest-corner---->最近角
farthest-corner ---->最远角
座标at position：默认在正中心，可以赋值座标（参照：元素的左上角）也可以赋值关键字（left center right top bottom）

给盒子添加宽300px，高200px，默认值形状ellipse（椭圆形），渐变中心点默认位置在正中心

background: radial-gradient(red,blue);

circle（圆形渐变），渐变中心点默认位置在正中心

background: radial-gradient(circle,red,blue);

位置：left top（渐变中心点在左上角），默认形状ellipse（椭圆）

background: radial-gradient(at left top,red,blue);

4个 ‘’大小size‘’ 的图解，渐变中心点位置在以左上角为参照的 x为50px，y为50px，渐变颜色为红–蓝--黑，例：

background: radial-gradient(circle closest-side at 50px 50px,red,blue，black);

设置颜色的位置,默认形状ellipse（椭圆形）

background: radial-gradient(red 0%,red 50%,blue 50%,blue 100%);

重复渐变

重复径向渐变：
repeating-radial-gradient
利用设置上面一个设置颜色的方式进行重复

div {
	width: 300px;
    height: 300px;
    background: repeating-radial-gradient(circle closest-side at center center,
    #fff 0%,#fff 10%,
    #000 10%,#000 20%);
}

利用重复径向渐变也可以做到一个类似于铅球（是不是很好玩）

div {
    width: 300px;
    height: 300px;
    background: repeating-radial-gradient(circle closest-side at center center,
    #fff,#000);
}

唱片纹理(取自https://codepen.io/thebabydino/embed/HjJlL)

div {
    position: relative;
    width: 262px; height: 262px;
    border-radius: 50%;
    background: 
    linear-gradient(30deg, transparent 40%, rgba(42, 41, 40, .85) 40%) no-repeat 100% 0, 
    linear-gradient(60deg, rgba(42, 41, 40, .85) 60%, transparent 60%) no-repeat 0 100%, 
    repeating-radial-gradient(#2a2928, #2a2928 4px, #ada9a0 5px, #2a2928 6px);
    background-size: 50% 100%, 100% 50%, 100% 100%;
}
div::after {
    position: absolute;
    top: 50%; left: 50%;
    margin: -35px;
    border: solid 1px #d9a388;
    width: 68px; height: 68px;
    border-radius: 50%;
    box-shadow: 0 0 0 4px #da5b33, inset 0 0 0 27px #da5b33;
    background: #b5ac9a;
    content: '';
}

重复线性渐变：
repeating-linear-gradient

div {
	width: 200px;
    height: 400px;
    background: repeating-linear-gradient(45deg,
    #fff 0%,#fff 10%,
    #000 10%,#000 20%);
}