如何在背景属性的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绝对定位为固定高度。

＆＃13;

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

您可以使用背景尺寸和位置：

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

demo

Answer 4

您可以尝试使用circle代替ellipse：

dabblet

上的演示

.rect2 {
    width: 600px;
    height: 100px;
    line-height: 100px;
    text-align: center;
    background: radial-gradient(circle, #ffffff 0%, #ffffff 59%, #dcdcdc 100%);
}