当我将边框半径和背景渐变应用于<li>圆角时，看起来参差不齐且粗糙。在这个 jsfiddle 上检查一下
我在 Chrome 和 FF 中看到了这一点。如果我删除渐变或边界半径，问题就会消失。
任何想法为什么会发生这种情况以及我如何解决它？
更新：
我正在开发一个基于 Josh F 想法的 jQuery 解决方案（请参阅下面的完整答案）。这是一个简单的 jQuery 函数，它在其后面附加元素的副本。目前，脚本将目标元素的定位设置为relative. （在某些情况下，我可以看到这是有问题的。）我的代码在 jsfiddle 上。
当前规范定义box-shadow为在. border-box但是，背景/边框将元素绘制到背景，而不考虑其他元素（它不使用对象绘制，仅在顶部绘制）。由于带有 的元素border-radius是在 之前绘制的box-shadow，因此它使用半透明边缘绘制角以使角看起来平滑（应该如此）。遗憾的是，由于规范的措辞box-shadow，它在元素之后绘制，因此在页面顶部（在元素之后）以半透明边缘绘制。通常，这会很好，但由于元素和元素box-shadow在相同的像素上都有透明边缘，它会导致小的、半透明的间隙。
这是一个已知的错误，或者至少被网页设计社区认为是一个错误。有关我的信息来源，请参阅Bugzilla Bug #474386（特别是评论 #6）。
绕过该错误的一种可能方法是在盒子后面放置一个比盒子高 1px 且颜色与盒子阴影相同的伪元素。这将通过使先前的白色边缘与盒子阴影的颜色相同或接近来隐藏错误。
有关示例，请参见此 jsFiddle。