两个重叠元素上的边框半径；背景透过显示

Question

我制作了一个CSS进度条，使用了两个重叠的元素。元素的CSS如下：

<code>#</code>status_progressbar {
  height: 22px;
  width: 366px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  background: #000;
  cursor: pointer;
}
<code>#</code>status_progressbar_progress {
  height: 22px;
  background: #eee;
  float: right;
  -moz-border-radius: 0 10px 10px 0;
  -webkit-border-radius: 0 10px 10px 0;
  border-radius: 0 10px 10px 0;
  /* width controlled by Rails backend, using inline style */
}

很不幸，正如您在这张图片中清晰地看到的那样，父元素的背景在右边部分可见。由于子元素的背景应该完全覆盖父元素，我不知道为什么会出现这种情况。

[此图片在Firefox 4中拍摄]

也许有人能解释一下为什么会发生这种情况以及如何解决它？

- M. Cypher

---

顺便说一句 - 不错的视觉效果。很有帮助。 - Dutchie432

Answer 1

这是一个已知的问题。解决方法之一是在需要有彩色边框的时候嵌套圆角元素。将另一个盒子填充与边框相同的宽度。

更多信息可以在@gonchuki的博客文章中找到：标准兼容性是谎言（或者说，所有浏览器都有损坏的border-radius）。

- Erik Tjernlund

---

啊，抱歉。我误读了你的问题。你的元素没有边框。但症状与博客文章中完全相同。 - Erik Tjernlund

好的，但在我的情况下我该如何修复它？ - M. Cypher

Answer 2

一个替代方法可能是仅使用状态进度条div（没有子元素）。创建一张足够宽的图像（比如1000像素），颜色可以自己选择（我个人会创建一个50%不透明度的白色图像）。

然后：

#status_progressbar {
  height: 22px;
  width: 366px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  background: #000 url("/path/to/image') repeat-y 0 0;
  cursor: pointer;
}

我会使用JavaScript操纵背景位置属性，始终提供px值而不是%值，因为%50会将图像居中。

var prcnt = (YOURPERCENTAGE/100)* 366;

- Ian Wood

---

不好意思，这在我的特定情况下是行不通的，因为进度条活动部分的背景实际上是一个线性渐变，而不是像我上面的示例中那样的颜色。由于目前还无法设置多个背景，所以它不起作用。抱歉我在原帖中没有澄清这一点。 - M. Cypher

不要设置多个背景 - 只需设置一个背景颜色和一张图片。将图像向左移动以模拟进度。 （PS现在可以设置多个背景图像（尽管移动可能会麻烦），这些天你也可以在CSS中创建渐变）。 - Ian Wood

啊，现在我明白你的意思了。我按照那种方式让它工作了，非常感谢。 - M. Cypher

Answer 3

我通过稍微调整CSS就能获得相当不错的结果。（演示 - 在Chrome和Firefox上测试过）

#status_progressbar_progress {
    ...
    margin-right:-1px; 
    ...
}

这只是将灰色的 div 往右移动一个像素。你甚至可以将它增加到 2 像素，我认为这看起来更好。确保在计算中补偿那个像素变化。

- Dutchie432

---

实际上，我自己想出了这个解决方案，但它是不正确的 - 如果你放大并仔细看，你会发现父元素顶部和底部边缘仍然可见一些像素。 - M. Cypher

Answer 4

我认为这是因为浏览器试图对边框进行反锯齿处理，可能通过调整透明度来实现，因此您的下层div是黑色的，顶部是灰色的，所以黑色透过去了。（不要引用我说的话，但至少这是我认为合乎逻辑的）。

您是否尝试将status_progressbar和status_progressbar_progress都包装在另一个div中，并给该div添加border-radius和overflow:hidden？

- easwee

Answer 5

你可以尝试将背景元素右侧的边框半径增加1像素。这可能会使其消失在前面。

- Alex

---

不幸的是，它并没有完全实现。 - M. Cypher