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>

具有线性渐变作为后备的圆锥形渐变

2 个答案: