Firefox中的CSS3盒子阴影渲染问题 [英] CSS3 box-shadow rendering issue in Firefox

问题描述

Css：

  .block {
 width：90px; 
 height：90px; 
 box-shadow：0 0 0 1px＃0084A3; 
 border-radius：100％; 
} 
  

它呈现非对称性并取决于窗口高度。
以下是小提琴。尝试垂直调整窗口大小，看看盒子阴影发生了什么。很容易达到这样的效果：
无效的盒子阴影渲染。你可以看到顶部的阴影比底部的要宽得多。

Chrome和Safari可以很好地处理它。

请感谢任何有帮助的想法。

0084A3; 它在firefox和chrome浏览器中都提供相同的输出。

Box-shadow renders incorrectly in firefox (was observed on v49).

Css:

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

It renders asymmetrically and depend on window height. Here's the fiddle. Try to resize the window vertically and see what is happening to box-shadow. It's easy to achieve something like this: invalid box-shadow rendering. You can see that top shadow is much wider than bottom one.

Chrome and Safari handles it well.

I would appreciate any helpful ideas.

解决方案

Please use box-shadow: inset 0 0 0 1px #0084A3; it gives same output in both firefox and chrome browsers.

这篇关于Firefox中的CSS3盒子阴影渲染问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！