Firefox 中的 CSS3 框阴影渲染问题答案

【问题标题】：CSS3 box-shadow rendering issue in FirefoxFirefox 中的 CSS3 框阴影渲染问题
【发布时间】：2017-01-30 11:50:36
【问题描述】：

Box-shadow 在 firefox 中渲染不正确（在 v49 上观察到）。

CSS：

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

它呈现不对称并取决于窗口高度。这是fiddle。尝试垂直调整窗口大小，看看 box-shadow 发生了什么。很容易实现这样的目标： invalid box-shadow rendering。您可以看到顶部阴影比底部宽得多。

Chrome 和 Safari 处理得很好。

如果有任何有用的想法，我将不胜感激。

【问题讨论】：

标签： css firefox

【解决方案1】：

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

【讨论】：

【解决方案2】：

在 Firefox 上试试这个-moz-box-shadow: 0 0 0 1px #0084A3;；

【讨论】：

【解决方案3】：

San 是对的，但只是为了更详细..

有两种阴影 1.内（插图） 2. 外层（默认）

所以在 css3 中，如果你没有指定 inset 属性，默认情况下它会采用外阴影。

插图

如果未指定（默认），则假定阴影为投影（就好像盒子在内容上方升起一样）。

插入关键字的存在将阴影更改为框架内的一个（就像内容在框内被压下一样）。嵌入阴影绘制在边框内（甚至是透明的），在背景之上，但在内容之下。

查看link了解更多详情

【讨论】：