这是 CSS3 的错误吗：使用 CSS3 渐变的圆角答案

【问题标题】：Is this a bug with CSS3: Rounded corners with CSS3 gradient这是 CSS3 的错误吗：使用 CSS3 渐变的圆角
【发布时间】：2011-01-13 16:51:09
【问题描述】：

我遇到了一个问题，即带有圆角的外部 div 的边框被带有 CSS3 渐变的内部元素截断。这是 CSS3 的错误吗？如果是，我会很乐意提交错误报告。

如果没有，我该如何解决这个问题？

截图：

【问题讨论】：

【解决方案1】：

问题不在于渐变 - 为您的 <h2> 元素提供坚实的背景以供查看。相反，您需要圆角 <h2> 以及包装 <div>。

将border-radius: 10px 10px 0 0; 和适当的供应商特定版本添加到<h2> 样式中，一切正常。

【讨论】：

此解决方案适用于除 IE 之外的所有浏览器。我只在 IE9 中尝试过，渐变填充似乎“流过”边界。（或者我错过了什么？）见：stackoverflow.com/questions/4692686/…
如果容器有溢出，这个解决方案不好：可见并且它是可滚动的，我现在正面临这个问题......

【解决方案2】：

溢出：隐藏；不工作

但确实如此：

h2
{
  position:relative;  
  z-index:-1;
....
}

【讨论】：

【解决方案3】：

它并不特定于背景渐变。它只是重叠在圆角顶部的 h2 元素的背景。我不确定确定这是最严格意义上的错误，但它是众所周知的。最简单的“修复”是将元素的角与背景进行四舍五入。 Example: just setup for chrome

【讨论】：