border-radius + gradient + box-shadow导致边缘不规则

Question

当我将border-radius和背景渐变应用于<li>时，圆角看起来粗糙粗糙。 Check it out on this jsfiddle

我在Chrome和FF中看到了这一点。如果我删除渐变或边界半径，问题就会消失。

为什么会发生这种情况以及如何解决这个问题？

更新 我正在开发一个基于Josh F的想法的jQuery解决方案（请参阅下面的完整答案）。这是一个简单的jQuery函数，它附加了元素的副本。目前，脚本将目标元素的定位设置为relative。 （在某些情况下，我可以看到这是有问题的。）我的代码在jsfiddle上here.

Answer 1

当前规范将box-shadow定义为border-box的在之外。但是，背景/边框将元素绘制到背景中，而不考虑其他元素（它不会使用对象绘制，仅在其上方）。由于在border-radius之前绘制了带有box-shadow的元素，因此它会使用半透明边缘绘制角落，以使角落看起来平滑（应该如此）。遗憾的是，由于box-shadow的规范是如何措辞的，因此在元素之后绘制，因此在页面顶部（在元素之后）绘制半透明边缘。通常，这样会很好，但由于元素和box-shadow在相同像素上都有透明边缘，因此会产生小的半透明间隙。

这是一个已知错误，或至少被网页设计社区视为错误。有关我的信息来源，请参阅Bugzilla Bug #474386 (specifically comment #6)。

Answer 2

解决这个问题的一种可能方法是将伪元素放在盒子后面，该盒子比盒子高1px，与盒子阴影颜色相同。这可以通过使先前的白色边缘与盒子阴影相同或接近颜色来隐藏错误。

有关示例，请参阅this jsFiddle。