如何在CSS中更改径向渐变的曲线？

Question

我试图实现这个渐变。我不明白的是它的曲率，我不确定如何复制它：

到目前为止我所拥有的：

和我的渐变代码：

radial-gradient(at top left,#629a92 36%,#02d2a0 67%, #fff 11%)

但是我不确定这会如何延伸到屏幕的末尾。我之前没有使用radial-gradient，所以我觉得我错过了一些东西。任何帮助将不胜感激。谢谢。

Answer 1

您还需要调整渐变的body { height:100vh; margin:0; background-image:radial-gradient(at top left,#629a92 36%,#02d2a0 67%, transparent 67.5%); background-size:120% 100%; background-repeat:no-repeat; }：

body {
 height:100vh;
 margin:0;
 background-image:radial-gradient(120% 100% at top left,#629a92 61%,#02d2a0 92%, transparent 92.5%);
 background-repeat:no-repeat;
}

或调整半径：

linear-gradient

<强>更新

如果它是弯曲形状内的linear-gradient，您可以尝试使用多个背景。我们的想法是创建radial-gradient，并在其上方添加一个透明色的body { height:100vh; margin:0; background-image: radial-gradient(120% 100% at top left,transparent 92%, #fff 92.5%), linear-gradient(135deg, #51a595 0%, #3fcfa2 100%); }，以便能够看到第一个渐变。

<xsl:template match="@*|node()">
    <xsl:copy>
        <xsl:apply-templates select="@*|node()"/>
    </xsl:copy>
</xsl:template>

Answer 2

如果仔细观察，它不是径向渐变。它是径向形状内的线性梯度。如果我是你，我会做一个SVG形状 - 我只是用作例子 - 并将它应用于渐变。

像这样：

＆＃13;

＆＃13;

body {
  margin: 0;
}

svg {
  width: 0;
  height: 0;
  display: block;
}

.main {
  width: 100%;
  height: 100vh;
  position: relative;
}
.main:before {
  content: '';
  position: absolute;
  overflow: hidden;
  width: 100%;
  height: 100%;
  background: #51a595;
  background: linear-gradient(135deg, #51a595 0%, #3fcfa2 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#51a595', endColorstr='#54bb9b',GradientType=1 );
  -webkit-clip-path: url("#mask");
          clip-path: url("#mask");
}

＆＃13;

<svg>
   <defs>
    <clipPath id="mask">
      <ellipse cx="0" cy="-1400" rx="2200" ry="1500"></ellipse>
    </clipPath>
  </defs>
</svg>

<div class="main"></div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

查看mdn上的径向渐变，at top left的大小可能需要2个百分点。我们可以使第一个大于100％，因此它将延伸到x轴上的屏幕之外，并将第二个百分比调整为100％，使其在底部结束。

radial-gradient(
  200% 100% at top left,
  #629a92 36%,
  #02d2a0 67%,
  #fff 11%
);

这应该会产生你想要的东西

＆＃13;

＆＃13;

.head {
  width: 100%;
  height: 200px;
  background: radial-gradient(
    200% 100% at top left,
    #629a92 36%,
    #02d2a0 67%,
    #fff 11%
  )
}

.body {
  height: 200px;
  width: 100%;
}

＆＃13;

<div class="head"></div>
<div class="body"></div>

＆＃13;

＆＃13;

＆＃13;