CSS3径向渐变

Question

我需要知道这是否可能。 “创意”photoshop部门提出了这个图像，之前只有1到5种颜色的渐变渐变。他们仍然这样做，但他们现在如何在它上面的白色圆圈。我怎么会去完成这个。示例语法没有确切的定位。在白色圆圈的顶部，我需要添加“白色”中的特定字体和文字

非常感谢提前。

Answer 1

将多个叠加渐变作为背景可能更简单。

第一个简单的线性渐变，从左到右，第二个径向渐变在顶部。

然后，只需将您的文本元素（绝对）定位在白色圆圈上（记住您知道它位于何处）

快速而肮脏的演示：

div {
  height: 350px;
  width: 90%;
  margin: 1em auto;
  border: 1px solid lightgrey;
  background: 
    radial-gradient(circle closest-side at 75% 50%, white, white 60%, transparent), 
    linear-gradient(to right, #344862, white 75%, yellow);
  position: relative;
}
span {
  position: absolute;
  left: 75%;
  top: 50%;
  transform: translate(-50%, -50%);
}

<div>
  <span>Lorem ipsum dolor.</span>
</div>

注意：径向渐变中心的定位如何与<span>的定位相同。 transform只是确保文字在圆圈中居中。