Firefox中的CSS3盒子阴影渲染问题

问题描述：

Firefox中的盒子阴影呈现不正确（在v49上观察到）。Firefox中的CSS3盒子阴影渲染问题

的CSS：

.block { 
    width: 90px; 
    height: 90px; 
    box-shadow: 0 0 0 1px #0084A3; 
    border-radius: 100%; 
}

它呈现不对称和依赖于窗口高度。这是fiddle。尝试垂直调整窗口大小，看看盒子阴影发生了什么。很容易实现这样的事情： invalid box-shadow rendering。你可以看到顶部阴影比底部阴影宽得多。

Chrome和Safari处理得很好。

我会很感激任何有用的想法。

答

请使用box-shadow: inset 0 0 0 1px #0084A3;它在firefox和chrome浏览器中都提供相同的输出。

很好。看起来非常好的解决方法。谢谢！ –

答

尝试这个-moz-box-shadow: 0 0 0 1px #0084A3;为Firefox;

'-moz-box-shadow'不再受firefox支持。 –

答

圣是正确的，但只是为了更详细地..

有2型投影的 1.内（插图） 2.外（默认）

在CSS3

所以，默认情况下它是如果没有指定插入属性，则取外部影子。

插图

如果未指定（默认）中，假定阴影是阴影（如同箱中的内容上面提出）。

inset关键字的存在将阴影更改为帧内的一个阴影（就好像内容在框内被压下一样）。插入阴影绘制在边界内（甚至透明），高于背景，但低于内容。

检查此link更多详细信息