我的目标是给一些div一个左上角和左上角。为此，我给了div两个背景图像linear-gradient：
background-image: linear-gradient(90deg, #263B4B 0, transparent 50px),
linear-gradient(180deg, #263B4B 0, transparent 50px);
这在Chrome 39和IE 11中看起来不错，但在Firefox 32中不是。 Firefox无法正确显示它。
起初，我有以下CSS，它运行良好，但由于有很多div有这个阴影，页面渲染极其缓慢到无法使用，尤其是在移动设备上。所以我不想使用box-shadow。
box-shadow: 18px 31px 95px 0px rgba(0, 0, 0, .2) inset;
如何在不使用图像文件的情况下在Firefox上使用它？
JSFiddle ：http://jsfiddle.net/eLkhwoqg/2
答案 0 :(得分：1)
Firefox在其他色卡和transparent关键字之间的插值不太对。由于transparent对应于rgba(0, 0, 0, 0)，因此Firefox会使用该值来计算渐变，除非它在非预乘的RGBA空间中这样做，这会导致渐变从您的给定颜色转换为黑色。我们知道这种行为实际上是不正确的，因为spec这样说。
幸运的是，解决方法很简单：只需use a zero alpha version of the same color you're using，Firefox就会正确插入渐变：
background-image: linear-gradient(90deg, #263B4B 0, rgba(38, 59, 75, 0) 50px),
linear-gradient(180deg, #263B4B 0, rgba(38, 59, 75, 0) 50px);
修复此问题后，您将可以使用transparent关键字。