css:CSS 线性渐变linear-gradient

CSS 渐变使您可以显示两种或多种指定颜色之间的平滑过渡。

CSS 定义了两种渐变类型:

  • 线性渐变(向下/向上/向左/向右/对角线)
  • 径向渐变(由其中心定义)

参考文档

线性渐变

语法

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

从上到下(默认)

background-image: linear-gradient(red, yellow);

在这里插入图片描述

从左到右

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

在这里插入图片描述

对角线

从左上角 到右下角

background-image: linear-gradient(to bottom right, red, yellow);

在这里插入图片描述

使用角度

-90deg 相当于从右向左

background-image: linear-gradient(-90deg, red, yellow);

在这里插入图片描述

使用多个色标

3个颜色

background-image: linear-gradient(red, yellow, green);

在这里插入图片描述

彩虹色

background-image: linear-gradient(
          to right,
          red,
          orange,
          yellow,
          green,
          blue,
          indigo,
          violet
        );

在这里插入图片描述

使用透明度

background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));

在这里插入图片描述

重复线性渐变

background-image: repeating-linear-gradient(red, yellow 10%, green 20%);

在这里插入图片描述

方向控制

方向枚举值角度值
从下到上to top0deg
从左到有to right90deg
从上到下(默认)to bottom180deg
从右到左to left270deg

在这里插入图片描述

完整代码

在线预览:https://mouday.github.io/front-end-demo/gradient/linear-gradient.html

<style>
      .box {
        height: 200px;
      }

      /* 从上到下(默认) */
      .linear-gradient--default {
        background-image: linear-gradient(red, yellow);
      }

      /* 从左到右 */
      .linear-gradient--to-right {
        background-image: linear-gradient(to right, red, yellow);
      }

      /* 对角线: 从左上角 到右下角 */
      .linear-gradient--to-bottom-right {
        background-image: linear-gradient(to bottom right, red, yellow);
      }

      /* 使用角度 */
      .linear-gradient--negative-90deg {
        background-image: linear-gradient(-90deg, red, yellow);
      }

      /* 使用多个色标 */
      .linear-gradient--three-color {
        background-image: linear-gradient(red, yellow, green);
      }

      /* 使用多个色标 彩虹色 */
      .linear-gradient--rainbow {
        background-image: linear-gradient(
          to right,
          red,
          orange,
          yellow,
          green,
          blue,
          indigo,
          violet
        );
      }

      /* 使用透明度 */
      .linear-gradient--transparent {
        background-image: linear-gradient(
          to right,
          rgba(255, 0, 0, 0),
          rgba(255, 0, 0, 1)
        );
      }

      /* 重复线性渐变 */
      .repeating-linear-gradient {
        background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
      }
    </style>

    <h1>线性渐变</h1>

    <h2>从上到下(默认)</h2>

    <p>background-image: linear-gradient(red, yellow);</p>

    <div class="box linear-gradient--default"></div>

    <h2>从左到右</h2>

    <p>background-image: linear-gradient(to right, red, yellow);</p>

    <div class="box linear-gradient--to-right"></div>

    <h2>对角线: 从左上角 到右下角</h2>

    <p>background-image: linear-gradient(to bottom right, red, yellow);</p>

    <div class="box linear-gradient--to-bottom-right"></div>

    <h2>使用角度: -90deg 相当于从右向左</h2>

    <p>background-image: linear-gradient(-90deg, red, yellow);</p>

    <div class="box linear-gradient--negative-90deg"></div>

    <h2>使用多个色标</h2>

    <p>background-image: linear-gradient(red, yellow, green);</p>

    <div class="box linear-gradient--three-color"></div>

    <h2>使用多个色标: 彩虹色</h2>

    <p>
      background-image: linear-gradient(to right,
      red,orange,yellow,green,blue,indigo,violet);
    </p>

    <div class="box linear-gradient--rainbow"></div>

    <h2>使用透明度</h2>

    <p>
      background-image: linear-gradient(to right, rgba(255,0,0,0),
      rgba(255,0,0,1));
    </p>

    <div class="box linear-gradient--transparent"></div>

    <h2>重复线性渐变</h2>

    <p>
      background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
    </p>

    <div class="box repeating-linear-gradient"></div>