css - border-radius + gradient + box-shadow 造成参差不齐的边缘

Question

当我将 border-radius 和背景渐变应用于 <li> 时圆 Angular 看起来参差不齐且粗糙。 Check it out on this jsfiddle

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

知道为什么会发生这种情况以及我该如何解决它吗？

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

Answer 1

当前的规范定义了 box-shadow 绘制在 border-box 的外面。然而，背景/边框将元素绘制到背景，而不考虑其他元素(它不会绘制 with 对象，只会在其之上绘制)。由于带有 border-radius 的元素是在 box-shadow 之前绘制的，因此它绘制了带有半透明边缘的 Angular ，使 Angular 看起来光滑(因为它应该)。遗憾的是，由于 box-shadow 规范的措辞方式，它绘制在元素之后，因此在页面顶部(元素之后)绘制了一个半透明边缘。通常情况下，这会很好，但由于元素和 box-shadow 在相同像素上都有透明边缘，因此会导致小的半透明间隙。

这是一个已知的错误，或者至少被网页设计社区认为是一个错误。参见 Bugzilla Bug #474386 (specifically comment #6)获取我的信息来源。