如何在径向渐变中控制椭圆的高度

Question

我正在尝试使用径向渐变作为背景，下面是代码。

<div></div>

    string bytes2Mac(byte[] bytes) {
        string[] m = { "0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "A", "B", "C", "D", "E", "F"};
        string ret = "";
        foreach (byte b in bytes)
        {
            int low = b & 0x0F;
            int hi = (b & 0xF0) >> 4;
            ret += m[hi] + m[low];
        }
        return ret;
    }

    public string ReturnMacAddress()
    {
        string macAddr = "";
        var network = new AndroidJavaClass("java.net.NetworkInterface").CallStatic<AndroidJavaObject>("getNetworkInterfaces");
        while(network.Call<Boolean>("hasMoreElements")) {
            var d = network.Call<AndroidJavaObject>("nextElement");
            var address = d.Call<byte[]>("getHardwareAddress");
            var ifname = d.Call<string>("getName");
            if (address != null && ifname == "wlan0") {
                macAddr = bytes2Mac(address);
                break;
            }
        }
        return macAddr;
    }

当我增加div的高度时，它显示为

但是我们希望椭圆形的辐射半径像下面一样固定垂直半径

我尝试播放背景尺寸，但div的高度不固定。所以我真的不能设置背景大小。

任何帮助将不胜感激。预先感谢。

Answer 1

使用值代替省略号

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

  

<ending-shape>

     

可以是circle或ellipse；确定渐变的结束形状分别是圆形还是椭圆形。如果省略，则如果<size>是单个<length>，则结束形状默认为圆形，否则为椭圆

  

<length-percentage>{2}

     

显式给出椭圆的大小。 第一个值代表水平半径，第二个值代表垂直半径。百分比值相对于渐变框的相应尺寸。负值无效。

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

---

另一种替代方法是使用固定的background-size：

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