以线性渐变作为后备的锥形渐变

Question

有没有什么方法可以设置一个锥形渐变背景，由于缺乏支持，在 Firefox、IE、Safari 等中有一个规则的线性渐变作为后备？无论我尝试以何种方式进行设置，线性渐变都会覆盖 Chrome.

中的二次曲线

Answer 1

一个想法是考虑2层。您将底层设为 linear-gradient，然后考虑在其上方使用伪元素作为圆锥渐变的另一个层。如果最后一个倒下，您将只能看到 linear-gradient。如果不是，它将覆盖 linear-gradient.

以下代码将在 Chrome 上显示圆锥渐变，在 Firefox 上显示线性渐变：

.box {
  width: 300px;
  height: 200px;
  background: linear-gradient(red, blue);
  position: relative;
  z-index: 0;
}

.box:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: conic-gradient(red, blue, red);
}

<div class="box">

</div>

Answer 2

请注意，这一定是以前版本 Chrome 中的一个错误，在今天的 v.75 中，简单且预期的级联在 Chrome 中完美运行，并且在不支持的浏览器中正确回退:

.box {
  width: 300px;
  height: 200px;
  background: linear-gradient(red, blue);
  background: conic-gradient(red, blue, red); 
  position: relative;
  z-index: 0;
}

<div class="box">

</div>

以线性渐变作为后备的锥形渐变

Conic-gradient with linear gradients as fallback

html

css

linear-gradients

conic-gradients