css之linear_gradient线性渐变

  • 普通背景
1
2
3
4
5
6
7
8
<div class="box"></div>
<style>
    .box {
        width: 200px;
        height: 200px;
        background: rgba(60, 100, 250);
    }
</style>
  • 渐变 自下往上
1
2
3
4
5
6
7
8
9
10
11
12
<div class="box1"></div>
<style>
    .box1 {
        width: 200px;
        height: 200px;
        background: linear-gradient(
            0deg,
            rgba(255, 192, 0.1),
            rgba(60, 180, 250)
        );
    }
</style>
  • 渐变 自左下往右上
1
2
3
4
5
6
7
8
9
10
11
12
<div class="box2"></div>
<style>
    .box2 {
        width: 200px;
        height: 200px;
        background: linear-gradient(
            45deg,
            rgba(255, 192, 0.1),
            rgba(60, 180, 250)
        );
    }
</style>
  • 渐变 自左往右
1
2
3
4
5
6
7
8
9
10
11
12
<div class="box3"></div>
<style>
    .box3 {
        width: 200px;
        height: 200px;
        background: linear-gradient(
            90deg,
            rgba(255, 192, 0.1),
            rgba(60, 180, 250)
        );
    }
</style>
  • 渐变区间 自左往右50%-100%
1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="box4"></div>
<style>
    .box4 {
        width: 200px;
        height: 200px;
        background: linear-gradient(
            90deg,
            rgba(255, 192, 0.1),
            50%,
            rgba(60, 180, 250)
        );
    }
</style>
  • 渐变区间 自左往右50%-90%

这样写好像有问题（

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="box5"></div>
<style>
    .box5 {
        width: 200px;
        height: 200px;
        background: linear-gradient(
            90deg,
            rgba(255, 192, 0.1),
            60%,
            rgba(60, 180, 250),
            90%
        );
    }
</style>
  • 三色渐变
1
2
3
4
5
6
7
8
<div class="box6"></div>
<style>
    .box5 {
        width: 200px;
        height: 200px;
        background: linear-gradient(90deg, red, blue, orange);
    }
</style>
  • 三色渐变 自左下往右上
1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="box7"></div>
<style>
    .box7 {
        width: 200px;
        height: 200px;
        background: linear-gradient(
            45deg,
            red,
            blue,
            orange
        );
    }
</style>