盒子阴影不适合元素的侧面

Question

  

注意：不要只关注此代码的目的，它只是一个极简主义的例子来强调受到质疑的问题。

当我使用box-shadow属性时，它有时不适合元素的边，因为元素与其阴影之间的边距为1px（或更小）。这是一个例子，使用transform来提出问题（我认为这不是获得它的唯一方法）：

h1 {
  width: 100px;
  text-align: center;
  margin: 25px 55px;
  background: black;
  box-shadow: 30px 0 0 black, -30px 0 0 black;
  font-size: 24px;
  line-height: 50px;
  /* I use 0.5px to show the bug, I would use n% in real conditions */
  transform: translate(0.5px, 0); 
}
h1 a {
  color: white;
  text-decoration: none;
}

<h1><a href="#">Foo</a></h1>

如果您没有看到任何内容，请尝试查看全屏代码段，然后调整浏览器大小（我遇到了Chrome和Firefox的问题）。下面是我拍摄的几张截图，以及（显而易见的）预期结果：

有人遇到过这个问题吗？ 看起来像浏览器，但我们可以找到一种解决方法来避免这些边距吗？

修改

我发现了一些新内容：如果我在一侧设置了一个盒子阴影，那么就不会出现这种差距，使用Chrome（它仍然在Firefox中）：

h1 {
  width: 100px;
  text-align: center;
  margin: 25px 55px;
  background: black;
  box-shadow: 30px 0 0 black, -30px 0 0 black;
  font-size: 24px;
  line-height: 50px;
  /* I use 0.5px to show the bug, I would use n% in real conditions */
  transform: translate(0.5px, 20px); 
}
h1 a {
  color: white;
  text-decoration: none;
}
h1:nth-child(2) {
  box-shadow: 30px 0 0 black;    
}
h1:nth-child(3) {
  box-shadow: -30px 0 0 black;    
}

<h1><a href="#">Foo</a></h1>
<h1><a href="#">Foo</a></h1>
<h1><a href="#">Foo</a></h1>

Answer 1

这个CSS有效：

h1 {
  width: 100px;
  text-align: center;
  margin: 0px;
  background: green;
  box-shadow: 30px 0 0 black;
  font-size: 24px;
  line-height: 50px;
  /* I use 0.5px to show the bug, I would use n% in real conditions */
  transform: translate(0.5px, 0); 
}
h1 a {
  color: white;
  text-decoration: none;
}

这是Fiddle。 您使用的颜色（黑色黑色）使您看到的细微差别。改变颜色就可以了。

Answer 2

使用Chrome版本42.0.2311.90 m

当浏览器分辨率发生变化时（从大约25％变为500％）和
平移y轴为0或0px
差距发生了。示例代码：

    transform: translate(0.5px, 0); 
    transform: translate(0.5px, 0px); 
    transform: translate(7px, 0); 
    transform: translate(7px, 0px);

使用zessx的 EDIT ，在输出中显示3个示例，我得到了与

相同的结果

    transform: translate(0.5px, 20px);

但是当我在任一轴上移除一个“px”时，没有间隙。例子：

    transform: translate(0.5px, 20);
    transform: translate(0.5px, 1);
    transform: translate(0.5, 20px); 
    transform: translate(0, 20px); 

由于 zessx

所述，当Chrome中的分辨率发生变化时，只有两侧的阴影框移动（L到R消失）