聊聊css渐变

1、线性渐变

语法：

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

第一个参数为方向，可忽略不写，不写时默认显示的方向为从上到下。

例如：

background-image: linear-gradient(#69f, #fd44ff);

显示的效果为：

方向的数值能够为：

to bottom(从上到下)
to right(从左到右)
to left(从右到左)
to top(从下到上)
to top left(从右下角到左上角)
to top right(从左下角到右上角)
to bottom left(从右上角到左下角)
to bottom right(从右下角到左上角)

例如：

background-image: radial-gradient(to right, #69f, #fd44ff);
background-image: radial-gradient(to top right, #69f, #fd44ff);

该代码同时能够用角度写为：

background-image: radial-gradient(90deg, #69f, #fd44ff);
background-image: radial-gradient(45deg, #69f, #fd44ff);

显示效果以下：

第二个参数为颜色 & 位置，可写多个颜色。

每一个颜色的位置对应的是该颜色的起始颜色。如：

background-image: linear-gradient(#69f 20%, #fd44ff);
background-image: linear-gradient(#69f 50%, #fd44ff);
background-image: linear-gradient(#69f 20%, #fd44ff 80%);
background-image: linear-gradient(#69f 50%, #fd44ff 50%);

显示效果为：

当咱们把两个色值的起始点设为一样数值的时候，会发现色块的衔接处没有过渡效果了。
那么咱们就能够用这个特性来实现多种效果。好比走马灯效果：

.light{
    margin: 100px;
    width: 400px;
    height: 20px;
    background: linear-gradient(-45deg,#fff 20%, #000 20% 40%, #fff 40% 60%, #000 60% 80%, #fff 80%);
    background-size: 20%;
    border: solid 1px #000;
    animation: run 5s linear infinite both;
}
@keyframes run{
    0%{
        background-position: 0 0;
    }
    100%{
        background-position: 100% 0;
    }
}

之后重复的线条，好比棋盘。

.chess {
    width: 300px;
    height: 300px;
    background: #eac991;
    background-image: repeating-linear-gradient(transparent, transparent 19px, #333 20px), repeating-linear-gradient(to right, transparent, transparent 19px, #333 20px);
    border: solid 3px #333;
    border-radius: 3px;
    position: relative;
    &:after{
        width: 15px;
        height: 15px;
        position: absolute;
        border-radius: 50%;
        background: #000;
        content: '';
        left:92px;
        top: 92px;
        box-shadow: 0 22px 0 #000, 20px 22px 0 #fff, 20px 41px 0 #fff, -20px 22px 0 #fff, -20px 41px 0 #000, 41px 41px 0 #000
    }
}

https://codepen.io/jianxiujiu...

2、径向渐变

语法:

background-image: radial-gradient(shape size at position, start-color, ..., last-color);

第一个参数shape为形状和圆心位置，可忽略不写，不写时默认为椭圆，圆心位置为形状的中心。

例如：

background-image: radial-gradient(#69f, #fd44ff);

以上代码等同于：

background-image: radial-gradient(ellipse, #69f, #fd44ff);

设置为圆形

background-image: radial-gradient(cricle, #69f, #fd44ff);

第一个参数的size为半径，半径为形状的对角线的一半。若是写一个参数则为圆形，写两个参数（参数值不相同）则为椭圆：

background-image: radial-gradient(100px, #69f, #fd44ff);  //半径为100px的圆
background-image: radial-gradient(200px 100px, #69f, #fd44ff);  //长轴为200px，短半轴为100px的椭圆

第一个参数的position为圆心位置，位置的数值能够为：

at center
at top
at right
at bottom
at left
at top left
at top right
at bottom left
at bottom right

例如：

background-image: radial-gradient(at top, #69f, #fd44ff); // 圆心在顶端中间位置
background-image: radial-gradient(at top right, #69f, #fd44ff); // 圆心在右上角位置

如图所示：

圆心位置也能够为具体数值，上面代码等同于：

background-image: radial-gradient(at 150px 0,#69f, #fd44ff); 
background-image: radial-gradient(at 300px 0,#69f, #fd44ff);

3、圆锥渐变

语法：

background-image: conic-gradient(from angle at position, start-color, ..., last-color )

一样的，第一个参数能够不写，默认的角度为0deg，锥心为形状的中心点。例如：

background-image: conic-gradient(#69f, #fd44ff);

咱们能够改变起始的位置，如：

background-image: conic-gradient(from -90deg, #69f, #fd44ff);

改变锥心位置：

conic-gradient(from -90deg at 80px 120px, #69f, #fd44ff)

未完待续。。。