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

【问题标题】：how to change height of ellipse in radial gradient in css for background property如何在css中为背景属性更改径向渐变中椭圆的高度
【发布时间】：2016-10-11 10:02:09
【问题描述】：

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

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

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

【问题讨论】：

你的问题不清楚。
我在问如何像垂直缩放一样在圆内变换椭圆。我知道我可以定位它，但我找不到用 px 或 % 值拉伸它的方法。
那么，例如你希望只有一半的渐变是可见的？
我发张照片来说明我的意思
这样会更容易理解..

标签： css

【解决方案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%;
}

&lt;div&gt;&lt;/div&gt;

我发现它比嵌套 div 更轻松，并且通过使用 background-position 和 size 值，您可以获得一些非常酷的效果！

【讨论】：

没想到看到这个问题的解决办法
迟到总比不到好（：

【解决方案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>

【讨论】：

这行得通……而且很聪明。但是没有办法用渐变属性来做正确的事情。
可能会有一些支持，但是有多少浏览器支持它可能是个问题。看这篇文章试试渐变定位：developer.mozilla.org/en-US/docs/Web/CSS/radial-gradient
示例，径向渐变位于 div 的不同部分。
好的，但这不会改变渐变的垂直高度......是吗？

【解决方案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

【讨论】：

【解决方案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%);
}

【讨论】：

是的，但它不能让你只控制垂直高度，你能让圆圈高度大于宽度吗..你能拉伸圆圈吗？
@MuhammadUmer - 是的，请查看更新后的答案。我也更改了演示。