css渐变色

最近要做一个类似于数据看板的页面，使用bootstrap5做基础的样式，一个页面划分为n个长宽不一的大小方块，需求要求背景色不用单色，要用渐变色，看起来会比较有质感，特意研究了下css的渐变色，这里记录下。

线性渐变

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

使用角度时：0deg 等于向上（to top），值 90deg 等于向右（to right），值 180deg 等于向下（to bottom）

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .big-box {
        display: flex;
      }
      .small-box {
        width: 100px;
        height: 80px;
        margin: 5px;
      }
      /* 设置从下到上，颜色依次为red、green的渐变 */
      .line1 {
        background-image: linear-gradient(to top, red, green);
      }

      /* 设置从右到左，颜色依次为red、green的渐变 */
      .line2 {
        background-image: linear-gradient(-90deg, red, green);
      }

      /* 设置从左上到右下，颜色依次为red、yellow、green的渐变 */
      .line3 {
        background-image: linear-gradient(to bottom right, red, yellow, green);
      }

      /* 设置从上到下，高度为50%颜色为red到yellow的渐变，剩余50%由blue填充 */
      .line4 {
        background-image: linear-gradient(red 0%, green 50%, blue 50%);
      }

      /* 设置从左到右，带有不透明度颜色的渐变 */
      .line5 {
        background-image: linear-gradient(to right, rgba(255, 0, 0, 0), rgba(255, 0, 0, 1));
      }

      /* 设置从左到右，重复渐变 */
      .line6 {
        background-image: repeating-linear-gradient(to right, red 0%, green 20%);
      }
    </style>
  </head>
  <body>
    <div class="big-box">
      <div class="small-box line1"></div>
      <div class="small-box line2"></div>
      <div class="small-box line3"></div>
      <div class="small-box line4"></div>
      <div class="small-box line5"></div>
      <div class="small-box line6"></div>
    </div>
  </body>
</html>

径向渐变

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

默认地，shape 为椭圆形，size 为最远角，position 为中心

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .big-box {
        display: flex;
      }
      .small-box {
        width: 100px;
        height: 80px;
        margin: 5px;
      }

      /* 设置形状为椭圆形，圆心位置在中心，从里到外颜色依次为red、yellow、green的渐变 */
      .radial1 {
        background: radial-gradient(red, yellow, green);
      }

      /* 设置形状为椭圆形，圆心位置在右下，从里到外颜色依次为red、yellow、green的渐变 */
      .radial2 {
        background: radial-gradient(at right bottom, red, yellow, green);
      }

      /* 设置形状为圆形，圆心位置在水平方向50%，垂直方向50%，从里到外颜色依次为red、yellow、green的渐变 */
      .radial3 {
        background: radial-gradient(circle at 50% 50%, red, yellow, green);
      }

      /* 设置形状为椭圆形，从里到外颜色依次为red、yellow、green的渐变，色标之间距离不均匀 */
      .radial4 {
        background-image: radial-gradient(red 5%, yellow 15%, green 60%);
      }

      /* 设置水平半径为50px，垂直半径为40px，圆心位置在水平方向50%，垂直方向50%，从里到外颜色依次为red、yellow、green的渐变 */
      .radial5 {
        background: radial-gradient(50px 40px at 50% 50%, red, yellow, green);
      }

      /* 设置重复径向渐变 */
      .radial6 {
        background-image: repeating-radial-gradient(red, yellow 10%, green 15%);
      }
    </style>
  </head>
  <body>
    <div class="big-box">
      <div class="small-box radial1"></div>
      <div class="small-box radial2"></div>
      <div class="small-box radial3"></div>
      <div class="small-box radial4"></div>
      <div class="small-box radial5"></div>
      <div class="small-box radial6"></div>
    </div>
  </body>
</html>

颜色搭配正确的话，确实比单色看起来要好很多

posted @ 2022-12-16 15:14 carol2014 阅读(1207) 评论(0) 收藏举报

刷新页面返回顶部