当我将border-radius和背景渐变应用于<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） 。