使用CSS渐变是否可以绘制曲线？

Question

我收到一位客户的设计稿，其中的一个按钮有两层渐变色。麻烦的是，其中一层有弧形边缘。我制作了这个按钮的效果图，希望你能明白我的意思。

我所做的只有直线边缘（请参见代码段，颜色差异不重要，只需要曲线）。有人之前做过这个吗？或者必须使用背景图像？谢谢！

P.S. 我也考虑过在伪元素上使用径向渐变，并将其绝对定位，但无法获得与线性渐变相同的直线边缘外观。

a {
  background-image: linear-gradient(-155deg,rgba(74,148,214,.4) 45%,rgba(255,255,255,.08) 15%),linear-gradient(258deg,rgba(87,238,255,.1),rgba(77,108,211,.2));
  background-color: rgba(74,148,214,.9);
  color: #fff;
  width: 200px;
  height: 40px;
  border-radius: 10px;
  margin-top: 50px;
  display: block;
  text-align: center;
  line-height: 40px;
}

<a>
  Some button
</a>

- DimSum

Answer 1

使用radial-gradient代替linear可以得到相似的效果：

a {

background-image: 
  radial-gradient(ellipse farthest-corner at 0 140%, #3c84cc 0%, #316dc2 70%, #4e95d3 70%);
  color: white;
  width: 200px;
  height: 50px;
  border-radius: 10px;
  margin-top: 50px;
  display: block;
  text-align: center;
  line-height: 50px;
}

<a>
  Some button
</a>

- Blazemonger

---

谢谢！我也在朝着那个方向努力。只是无法得到我想要的精确外观...这看起来很棒！ - DimSum

Answer 2

您可以使用伪元素使用圆形绘制曲线，然后将任何渐变作为背景。

a {
    background-color: lightblue;
    color: #fff;
    width: 200px;
    height: 40px;
    border-radius: 10px;
    margin-top: 50px;
    display: block;
    text-align: center;
    line-height: 40px;
    position: relative;
    z-index: 1;
    overflow: hidden;
}
a:after {
    content: '';
    position: absolute;
    background-color: blue;
    width: 600px;
    height: 200px;
    border-radius: 50%;
    top: 0;
    left: 0;
    transform: translate(-49%,0);
    z-index: -1;
}

<a>
  Some button
</a>

- Michael Coker

---

谢谢！我也在那个方向上尝试了，但是试图使用径向渐变并不能得到我想要的精确效果。我会尝试在伪元素上使用线性渐变。 - DimSum

Answer 3

我刚刚修改了一下@Blazemonger的帖子。 我修正了弯曲线的位置。

a {
  background-image: radial-gradient(ellipse farthest-corner at -10% 250%, #3c84cc 0%, #315dc2 80%, #4e95d3 80%);
  color: white;
  width: 200px;
  height: 50px;
  border-radius: 10px;
  margin-top: 50px;
  display: block;
  text-align: center;
  line-height: 50px;
} 

<a>Some button</a>

- theAlexandrian