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

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关键字.

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

How to move circular radial gradient slightly to top?

html

css

gradient