如何将圆形径向渐变稍微移动到顶部？

Question

如何在保持相同圆形宽度和高度的同时稍微向上移动径向渐变？

div {
  line-height: 100px;  
  text-align: center;
  color: #333;  
  width: 100%;
  background: radial-gradient(ellipse 115px 102px, #fff, #516e8e);
}

<div>text</div>

我找到了这个解决方案，但是渐变被拉伸了。

background: radial-gradient(at top,red,yellow,green);

这里是Codepen。

Answer 1

使用at定义渐变的位置，如下：

radial-gradient(115px 102px at center top, #90aed0, #516e8e)

您可以使用关键字px 或% 值来定义形状的位置：

.box-2 {
  background: radial-gradient(115px 102px at center top, #90aed0, #516e8e);
}

.box {
  line-height: 100px;  
  text-align: center;
  color: #fff;  
  width: 100%;
}

<p class="box box-2">text</p>

注意：因为您已经定义了特定的大小，即115px 102px，所以不需要使用ellipse 或circle 关键字。