我的目标是给某些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
Firefox在其他颜色停止点和transparent关键字之间的插补不太正确。因为transparent与相对应rgba(0, 0, 0, 0)，所以Firefox使用该值来计算渐变，除非它在非预乘的RGBA空间中这样做，否则会导致渐变从您的给定颜色转换为黑色。我们知道这种行为实际上是不正确的，因为该规范是这样说的。
幸运的是，解决方法很容易：只需使用与您使用的相同颜色的零alpha版本， 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向前的关键字。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句