CSS3新增新增渐变

最新推荐文章于 2024-08-29 15:27:25 发布

peakJun

最新推荐文章于 2024-08-29 15:27:25 发布

阅读量46

点赞数

文章标签： css3 前端 css

本文链接：https://blog.csdn.net/JunGuanDreams/article/details/130736521

版权

本文介绍了CSS中的几种渐变效果，包括线性渐变（通过方向和颜色停止点控制），径向渐变（通过圆心和形状调整），以及如何创建重复渐变以在无渐变区域重新开始。示例代码展示了不同渐变效果的实现，帮助读者理解和应用这些技术。

摘要由CSDN通过智能技术生成

1，线性渐变

总结

代码演示

 <style>
    .box{
      width: 300px;
      height: 200px;
      border: 1px solid black;
      float: left;
      margin-left: 10px;
      font-size: 20px;
    }
    .box1{
      background-image: linear-gradient(red,yellow,green);
    }
    .box2{
      background-image: linear-gradient(to right top, red,yellow,green);
    }
    /* 20deg旋转20度 */
    .box3{
      background-image: linear-gradient(20deg, red,yellow,green);
    }
    .box4{
      background-image: linear-gradient(45deg, red 50px,yellow 100px,green 150px);
    }
    .box4{
      background-image: linear-gradient(45deg, red 50px,yellow 100px,green 150px);
    }
    .box5{
      background-image: linear-gradient(20deg, red 50px,yellow 100px,green 150px);
      font-size: 80px;
      text-align: center;
      line-height: 200px;
      font-weight: bold;
      color: transparent;
      -webkit-background-clip: text;
    }
  </style>
</head>
<body>
  <div class="box box1">默认情况（从上到下）</div>
  <div class="box box2">通过关键词调整线性渐变渐变的方向</div>
  <div class="box box3">通过角度调整线性渐变渐变的方向</div>
  <div class="box box4">调整线性渐变的区域</div>
  <div class="box box5">你好啊</div>
</body>

运行结果

2，径向渐变

总结

代码演示

<style>
    .box{
      width: 300px;
      height: 200px;
      border: 1px solid black;
      float: left;
      margin-left: 10px;
      font-size: 20px;
      margin-top: 10px;
    }
    .box1{
      background-image: radial-gradient(red,yellow,green);
    }
    .box2{
      background-image: radial-gradient(at right top, red,yellow,green);
    }
    .box3{
      background-image: radial-gradient(at 100px 50px, red,yellow,green);
    }
    .box4{
      background-image: radial-gradient(circle, red,yellow,green);
    }
    .box5{
      background-image: radial-gradient(200px 200px, red,yellow,green);
    }
    .box6{
      background-image: radial-gradient(red 50px,yellow 100px,green 150px);
    }
    .box7{
      background-image: radial-gradient(100px 50px at 100px 50px ,red 50px,yellow 100px,green 150px);
    }
  </style>
</head>
<body>
  <div class="box box1">默认情况</div>
  <div class="box box2">通过关键词调整径向渐变的圆心</div>
  <div class="box box3">通过像素值调整径向渐变的圆心</div>
  <div class="box box4">通过circle关键字调整为正圆</div>
  <div class="box box5">通过像素值调整为正圆</div>
  <div class="box box6">调整径向渐变的区域</div>
  <div class="box box7">综合写法</div>
</body>

运行结果

3，重复渐变

总结：得现有线性渐变或径向渐变、重复线性渐变就是在么有发生渐变的区域，重新开始渐变

代码演示

 <style>
    .box{
      width: 300px;
      height: 200px;
      border: 1px solid black;
      float: left;
      margin-left: 10px;
      font-size: 20px;
    }
    .box4{
      background-image:  repeating-linear-gradient(20deg, red 50px,yellow 100px,green 150px);
    }
    .box6{
      background-image: repeating-radial-gradient(red 50px,yellow 100px,green 150px);
    }
  </style>
</head>
<body>
  <!-- 重复线性渐变就是在么有发生渐变的区域，重新开始渐变 -->
  <div class="box box4">重复线性渐变</div>
  <div class="box box6">重复径向渐变</div>
</body>

运行结果

4，渐变小案例

代码演示

 <style>
    .box1{
      width: 600px;
      height: 800px;
      margin: 0 auto;
      padding: 20px;
      border: 1px solid black;
      background-image: repeating-linear-gradient(transparent 0px,transparent 29px,gray 30px);
      background-clip: content-box;
    }
    .box2{
      width: 200px;
      height: 200px;
      border-radius: 50%;
      background-image: radial-gradient(at 80px 80px,white,#333);
    }
  </style>
</head>
<body>
  <div class="box1"></div>
  <div class="box2"></div>
</body>

运行结果