[分享]css两曲线之间添加颜色

CSS中的两条曲线之间添加颜色是一种非常实用的方法，在很多网页设计中经常会用到。下面我们来详细了解一下它是如何实现的。.container{ : relative; width: 100; heigh...

CSS中的两条曲线之间添加颜色是一种非常实用的方法，在很多网页设计中经常会用到。下面我们来详细了解一下它是如何实现的。

.container{
  position: relative;
  width: 100%;
  height: 200px;
  overflow: hidden;
}

.curve1{
  position: absolute;
  top: -25px;
  left: -40px;
  width: 200px;
  height: 200px;
  background-color: #fff;
  border-radius: 50%;
}

.curve2{
  position: absolute;
  top: -85px;
  right: -150px;
  width: 400px;
  height: 400px;
  background-color: #fff;
  border-radius: 50%;
}

.color-design{
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-image: linear-gradient(
      95deg,
      #3b87f2 20%,
      #21cbf3 80%
    );
} 

首先我们需要准备两条曲线，分别命名为curve1和curve2。使用绝对定位将两个曲线放在容器中，并设置overflow:hidden来控制溢出内容不显示。

接着我们需要一条背景颜色曲线，命名为color-design。使用绝对定位覆盖在curve1和curve2之上，使它成为两个曲线之间的背景。

最后使用background-image添加以起始颜色和结束颜色为参数的linear-gradient，从curve1到curve2之间添加颜色。

这样，我们就完成了CSS中两条曲线之间添加颜色的实现。通过简单的调整，我们可以在网页设计中随意使用它，为网页增加美观感。