html - 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只是确保文本在圆圈中居中。