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

Question

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

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

我得到了 div 内部的椭圆，并且符合 div 的形状。因此，如果 div 的高度很大，那么 ellipse 将被垂直拉伸(stretch)。如果 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 更简单，并且通过调整背景位置和大小值，您可以获得一些非常酷的效果!