从顶部开始 css 径向渐变 40%

Question

我现在有这样的径向渐变：

background-image: radial-gradient(circle at center left, rgb(${colours.blue}), rgb(${colours.darkBlue}));

它从中间开始，但我希望它从顶部开始 40%，这样的东西在 chrome 中有效，但在 firefox 中无效（两者都是最新的）

background-image: radial-gradient(circle at top 40% left, rgb(${colours.blue}), rgb(${colours.darkBlue}));

像rgb(${colours.darkBlue})这样的位只是导入像'255, 255, 255'

这样的字符串

Answer 1

Firefox 有一个 history of bugs with radial-gradient(). But i've found a possible solution on MDN:

div {
  width: 100vh;
  height: 100vh;
  background-image: radial-gradient(farthest-corner at 0% 30% , #FF0000 0%, #0000FF 50%);
}

<div>test</div>

在 Firefox 和 Chrome 中测试，两者都产生了所需的结果，要反转效果（右下角），只需取相反的变量：

div {
  width: 100vh;
  height: 100vh;
  background-image: radial-gradient(farthest-corner at 100% 70% , #FF0000 0%, #0000FF 50%);
}

<div>test</div>

Answer 2

您可以这样控制百分比：

background-image: radial-gradient(blue 40%, darkblue 60%);

您还可以使用 webkit 和 moz 获得额外支持。请参阅此处的 fiddle：https://jsfiddle.net/v8crqy99/1/

Start css radial gradient 40% from the top