How to control height of ellipse in radial gradient

问题

I am trying to use radial gradient for my background and below is the code.

div {
  width: 778px;
  height: 100px;
  background: radial-gradient(ellipse at top center, green, yellow 229px);
  background-size: 100% 100%;
  background-position: 0% 0%;
}

<div></div>

When I increase the height of the div it is appearing as

But we want to have fixed vertical radius for ellipse in radiant like below one

I tried to play around the background-size but the height of the div is not fixed. so I really cant set background-size.

Any help would be greatly appreciated. Thanks in advance.

回答1:

use values instead of ellipsis

body {
  background: radial-gradient(220px 80px at top center, green, yellow);
  margin: 0;
  height: 100vh;
}

<ending-shape>

Can be either circle or ellipse; determines whether the gradient’s ending shape is a circle or an ellipse, respectively. If is omitted, the ending shape defaults to a circle if the <size> is a single <length>, and to an ellipse otherwise

<length-percentage>{2}

Gives the size of the ellipse explicitly. The first value represents the horizontal radius, the second the vertical radius. Percentages values are relative to the corresponding dimension of the gradient box. Negative values are invalid.

Reference: https://drafts.csswg.org/css-images-3/#valdef-radial-gradient-ending-shape

Another alternative is to use a fixed background-size:

body {
  background: 
    radial-gradient(farthest-side at top center, green, yellow)
      top center/350px 80px no-repeat,
    yellow;
  margin: 0;
  height: 100vh;
}

来源：https://stackoverflow.com/questions/57110048/how-to-control-height-of-ellipse-in-radial-gradient

标签

css

radial-gradients