html - 以线性梯度作为后备的圆锥梯度

Question

有没有办法设置一个圆锥渐变背景，由于缺乏支持，它在 Firefox、IE、Safari 等中具有规则的线性渐变作为后备？无论我尝试如何设置，线性渐变都会覆盖 Chrome 中的圆锥曲线。

Answer 1

一种想法是考虑 2 层。您将底层设为 a，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>