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

标签 html css linear-gradients conic-gradients

有没有什么方法可以设置一个圆锥渐变背景,由于缺乏支持,在 Firefox、IE、Safari 等中有一个规则的线性渐变作为回退?无论我尝试以何种方式进行设置,线性渐变都会覆盖 Chrome 中的二次曲线。

最佳答案

一个想法是考虑 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>

关于html - 以线性渐变作为后备的锥形渐变,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54964915/

相关文章:

c# - 如何在 Html.ListBoxFor 中设置单个(或所有,每个)选项/元素的样式?

Javascript/jQuery : Split content in two parts

javascript - html背景图片更改为css?

javascript - 当浏览器大小改变时改变背景视频的大小

javascript - CSS3 线性渐变带

css - CSS3 动画和线性渐变的日出和日落不平滑

php - 特殊字符在链接标题中不起作用

javascript - 使用自定义代码将 Chartjs 更新到 2.5

css - 如何在IE10中使用css线性渐变?

html - 如何使用 CSS 创建响应式水平布局?