CSS|线性渐变

最新推荐文章于 2024-05-09 20:59:01 发布

Alan_Lowe

最新推荐文章于 2024-05-09 20:59:01 发布

阅读量121

点赞数 1

分类专栏： # CSS 文章标签： css css3

本文链接：https://blog.csdn.net/qq_45985728/article/details/119254391

版权

CSS 线性渐变方向设置颜色过渡前端开发

关键词由CSDN通过智能技术生成

CSS 专栏收录该内容

30 篇文章 1 订阅

订阅专栏

CSS|线性渐变

background-image: linear-gradient(方向，颜色……)

其中方向可以用tight，left，top，bottom或者其组合方式进行：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>线性渐变</title>
  <style>
      div{
          width: 200px;
          height: 200px;
      }
    /*background-image: linear-gradient(方向，颜色……)*/
    /*方向：to right 向右；to left 向左；to bottom 向下 to right bottom 向右下*/
    .div1{
        background-image: linear-gradient(to right,green,yellow);
    }
      .div2{
          background-image: linear-gradient(to left,green,yellow);
      }
      .div3{
          background-image: linear-gradient(to right bottom,green,yellow);
      }
      .div4{
          background-image: linear-gradient(to right,green,yellow,red);
      }
  </style>
</head>
<body>

<div class="div1">
  div1
</div>
<br>
<div class="div2">
  div2
</div>
<br>
<div class="div3">
  div3
</div>
<br>
<div class="div4">
  div4
</div>

</body>
</html>