CSS渐变色

最新推荐文章于 2024-04-24 10:32:12 发布

遇上日落

最新推荐文章于 2024-04-24 10:32:12 发布

阅读量6.9k

点赞数 2

分类专栏：渐变颜色文章标签：前端 html css css3

本文链接：https://blog.csdn.net/m0_63639281/article/details/125932218

版权

渐变颜色专栏收录该内容

1 篇文章 0 订阅

订阅专栏

渐变：

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

渐变是图片，通过 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>