Как переместить круговой радиальный градиент немного вверх?

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.

572 1

html css css3 gradient

1 ответ:

Comments

Ничего не найдено.

Mohammad Usman · Accepted Answer · 2017-04-14 13:14:08

Определите положение градиента, используя 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.