以线性梯度作为后备的圆锥梯度答案

【问题标题】：Conic-gradient with linear gradients as fallback以线性梯度作为后备的圆锥梯度
【发布时间】：2019-07-24 16:24:34
【问题描述】：

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

【问题讨论】：

标签： html css linear-gradients conic-gradients

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：