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 bugs radial-gradient() div { width: 100vh; height: 100vh; background-image: radial-gradient(farthest-corner at 0% 30% , #FF0000 0%, #0000FF 50%); }。但我在MDN:

上找到了可能的解决方案

＆＃13;

<div>test</div>

＆＃13;

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

＆＃13;

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

＆＃13;

<div>test</div>

＆＃13;

self.collectionView.frame = CGRectMake(self.collectionView.frame.origin.x, 44, self.collectionView.frame.size.width, self.collectionView.frame.size.height);

＆＃13;

Answer 2

您可以像这样控制百分比：

{{1}}

您还可以使用webkit和moz获得额外支持。请看这里的小提琴：https://jsfiddle.net/v8crqy99/1/

从顶部开始css径向梯度40％

2 个答案: