css 背景颜色线性渐变_background: linear-gradient-CSDN博客

1、普通渐变

background:linear-gradient( 颜色1，颜色2 )

颜色渐变方向默认从上往下颜色1渐变成颜色2

.box1{
    border: 1px solid black;
    width: 200px;
    height: 200px;
    background: linear-gradient(blue,red);
}

2、渐变方向

background:linear-gradient( 方向，颜色1，颜色2 )

方向可写成（to ...）

如（to right）指的是颜色1向右渐变成颜色2，（to top right）指的是颜色1向右上角渐变成颜色2

.box1{
    border: 1px solid black;
    width: 200px;
    height: 200px;
    background: linear-gradient(to right,blue,red);
}
.box2{
    border: 1px solid black;
    margin-left: 10px;
    width: 400px;
    height: 200px;
    background: linear-gradient(to top right,blue,red);
}

方向也可以用角度设置，写成（...deg），“deg”指“度”的意思

为了方便理解，我制作一幅图，如下

.box1{
    border: 5px solid black;
    width: 200px;
    height: 200px;
    background: linear-gradient(-110deg,blue,red);
}
.box2{
    border: 5px solid black;
    margin-left: 10px;
    width: 400px;
    height: 200px;
    background: linear-gradient(45deg,blue,red);
}

3、渐变起始位置

background:linear-gradient( 颜色1 起始位置，颜色2 )

起始位置可写成（...px）

.box1{
    border: 5px solid black;
    width: 200px;
    height: 200px;
    background: linear-gradient(blue,red);
}
.box2{
    border: 5px solid black;
    margin-left: 10px;
    width: 200px;
    height: 200px;
    background: linear-gradient(blue 150px,red);
}

起始位置也可写成（...%）

.box1{
    border: 5px solid black;
    width: 200px;
    height: 200px;
    background: linear-gradient(135deg,blue,red);
}
.box2{
    border: 5px solid black;
    margin-left: 10px;
    width: 200px;
    height: 200px;
    background: linear-gradient(135deg,blue 50%,red);
}

4、重复渐变

background: repeating-linear-gradient( 颜色1 起始位置，颜色2 )

顾名思义，“repeating”指的就是重复的意思

设置重复效果时，还需加上某个颜色的起始位置，否则repeating没有效果

.box1{
    border: 5px solid black;
    width: 200px;
    height: 200px;
    background: repeating-linear-gradient(blue 30%,red);
}
.box2{
    border: 5px solid black;
    margin-left: 10px;
    width: 200px;
    height: 200px;
    background: repeating-linear-gradient(blue,red 30%);
}

5、多种颜色渐变

background: linear-gradient( 颜色1，颜色2，颜色3，... )

还可以设置多个颜色渐变

.box1{
    border: 5px solid black;
    width: 200px;
    height: 200px;
    background: linear-gradient(pink,orange,magenta,cyan);
}

6、透明度渐变

background: linear-gradient( rgba（x, y, z, k1 ）, rgba(x, y, z, k2 ) )

rgba(x,y,z, k )中x，y，z 分别取值0-225。k 取值0-1，0代表完全透明，1代表不透明

body{
    color: white;
    background: green;
}
.box1{
    margin: 90px auto;
    border: 5px solid black;
    width: 200px;
    height: 200px;
    background: linear-gradient(rgba(255, 166, 0, 1),
                                rgba(225, 165, 0, 0),
                                rgba(225, 165, 0, 0.404));
}