边框半径+渐变+盒子阴影导致衣衫褴褛的边缘

当我将边框半径和背景渐变应用于<li>时，圆角看起来粗糙和粗糙。 Check it out on this jsfiddle 边框半径+渐变+盒子阴影导致衣衫褴褛的边缘

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

任何想法，为什么发生这种情况，我会如何解决它？

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

来源

2012-04-18 emersonthis

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

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

来源

2012-04-18 14:07:41 0b10011

很酷。很高兴知道。你知道任何变通（除了恢复到图像文件的背景？）？ – emersonthis 2012-04-18 14:19:58

@爱默生，使用图像文件背景将*不*解决背景。这是背景本身如何绘制的问题，并不是特定于渐变（请参阅[jsFiddle示例]（http://jsfiddle.net/wCtgh/1/））。我典型的解决方法是使用一个'box-shadow'和'background'，它与父代的'background'离得太远了。尽管透明间隙仍然可见，但并不明显。不以任何方式理想，但它的工作原理。另一个选择是不使用“border-radius”（因为这是主要的罪魁祸首）。 – 0b10011 2012-04-18 14:30:15

呵呵。我认为我遵循你所说的话，但看起来梯度也是问题的一部分。没有？当我在Chrome浏览器上查看你的jsFiddle（平坦背景）时，问题就不存在了。 – emersonthis 2012-04-18 15:34:35

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

查看this jsFiddle举例。

来源

2012-04-18 16:14:53

非常聪明。我只是想着尝试类似的东西，但是我没有想过使用伪元素。 – emersonthis 2012-04-18 17:11:28

这样你就不必乱搞元素的父元素或添加任何额外的标记。 – 2012-04-18 17:14:54

我正在玩这个，我发现了一个障碍：我在我的网站上使用'border-radius'，使用几个不同的类。我意识到我将不得不创建大量的重复类来在所需的任何地方应用伪元素，因为我无法想出一种以不会写的方式来写CSS变得非常混乱。换句话说，我希望我能以某种方式镜像这个parten的样式，这样这个类可以被重用： '.rounded-corners {/ * border radius * /}' '.rounded-corners：{/ * border radius rules * /;宽度：[parent_width];高度：[parent_height]; ...}' – emersonthis 2012-04-18 17:46:00

边框半径+渐变+盒子阴影导致衣衫褴褛的边缘

回答

相关问题