渐变：

通过渐变可以设置一些复杂的背景颜色，可以从实现一个颜色向其他颜色过渡的效果

渐变是图片，通过 background-image设置

CSS 定义了两种渐变类型：

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

    linear-gradient(位置,颜色,颜色)，线性渐变，颜色沿着一条直线发生变化 

 <style>
        .box1 {
          width: 200px;
          height: 200px;
          background-image:linear-gradient(red 10%,yellow,green,orange) ;
        }
      </style>
</head>
<body>
    <div class="box1"></div>
</body>
</html>

 线性渐变-从上到下

 .box1 {
          width: 400px;
          height: 200px;
          background-image: linear-gradient(red, yellow);
}
      </style>
</head>
<body>
    <div class="box1"></div>
</body>
</html>

     线性渐变 - 从左到右

   <style>
        .box1 {
          width: 400px;
          height: 200px;
          background-image: linear-gradient(to right, red , yellow);
        }
      </style>
</head>
<body>
    <div class="box1"></div>
</body>
</html>

线性渐变 - 对角线

从左上角开始（到右下角）的线性渐变。它从红色开始，过渡到黄色：

 <style>
        .box1 {
          width: 400px;
          height: 200px;
          background-image: linear-gradient(to bottom right, red, yellow);
        }
      </style>
</head>
<body>
    <div class="box1"></div>
</body>
</html>

# 前端 # html # css # css3
Logo
华为开发者空间

华为开发者空间，是为全球开发者打造的专属开发空间，汇聚了华为优质开发资源及工具，致力于让每一位开发者拥有一台云主机，基于华为根生态开发、创新。

更多推荐

cover

COC云运维中心新特性解读，让智能运维更高效

avatar 华为开发者空间
cover

简单几步，基于云主机快速为Web项目添加AI助手

avatar 华为开发者空间
cover

GaussDB性能调优

avatar 华为开发者空间