有没有什么方法可以设置一个圆锥渐变背景,由于缺乏支持,在 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/