CSS box-radius破坏了firefox上的box-shadow插入效果

Question

我有一个div标签，我想用圆角顶部设计样式。而且，我遇到了box-radius的问题。

＆＃13;

＆＃13;

.box {
  width: 100px;
  height: 100px;
  -webkit-box-shadow: inset 0 20px 3px 1px #4D7594;
  box-shadow: inset 0 20px 3px 1px #4D7594;
  border-radius: 15px;
}

＆＃13;

<div class="box">
</div>

＆＃13;

＆＃13;

＆＃13;

好吧，到目前为止效果很好。但在此示例中，如果我向px添加更多border-radius，则会突破box-shadow的插入内容。

＆＃13;

＆＃13;

.box {
  width: 100px;
  height: 100px;
  -webkit-box-shadow: inset 0 20px 3px 1px #4D7594;
  box-shadow: inset 0 20px 3px 1px #4D7594;
  border-radius: 16px;
}

＆＃13;

<div class="box">
</div>

＆＃13;

＆＃13;

＆＃13;

您可能会注意到.box的顶部区域似乎缺少阴影。此行为仅发生在 firefox 上。目前，我正在使用 firefox 45.0.1 。

Answer 1

此时设置两个阴影似乎可以修复它：

.box {
  width: 100px;
  height: 100px;
  -webkit-box-shadow: inset 0 20px 3px 1px #4D7594;
  box-shadow: inset 0 18px  #4D7594, inset 0 20px 3px 1px #4D7594;
  border-radius: 16px;
}

<div class="box">
</div>