如何在背景属性的css中改变径向渐变中椭圆的高度

Question

当我创建这样的背景渐变时:

background: radial-gradient(ellipse at center, #ffffff 0%,#ffffff 59%,#ededed 100%);

我得到div内部的椭圆,并符合div的形状.因此,如果div的高度很大,那么椭圆将被垂直拉伸.如果div是一个正方形,那么椭圆就像一个圆圈.没关系,我想控制椭圆的高度.

Answer 1

确切的问题可以通过组合最后2个答案来解决:圆形渐变和调整背景大小.

像这样的东西:

div {
    width: 300px;
    height: 100px;
    background: radial-gradient(circle, white 0%, red 50%, black 100%);
    background-size: 100% 200%;
    background-position: 0% 50%;
}

<div></div>

我发现它比嵌套的div更麻烦,通过使用背景位置和大小值,你可以获得一些非常酷的效果!

Answer 2

使用将溢出设置为隐藏的 div，并将其内部的 div 绝对定位为固定高度。

#outer {
  height: 100px;
  overflow: hidden;
  position: relative;
  width: 200px;
}
#inner {
  background: radial-gradient(ellipse at center, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%);
  bottom: 0;
  height: 150px;
  position: absolute;
  width: 200px;
}

<div id="outer">
  <div id="inner"></div>
</div>