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

Question

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

＆＃13;

＆＃13;

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

＆＃13;

<div>text</div>

＆＃13;

＆＃13;

＆＃13;

我找到了这个解决方案，但随后渐变变得拉长。

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或{{1关键字。