这是一个CSS3的bug：使用CSS3渐变的圆角

我遇到了一个问题，其中圆角的外部div的边框被CSS3渐变的内部元素截断。这是CSS3的错误 - 如果是这样，我会很乐意提交一个错误报告。这是一个CSS3的bug：使用CSS3渐变的圆角

如果不是，我该如何解决这个问题？

来源&演示这里： http://jsfiddle.net/joshuamcginnis/2aJ8X/

截图：

alt text

来源

2011-01-13 doremi

当您设置了不同的元素，以圆角的背景这是一个相当普遍的问题。 – Spudley 2011-01-13 17:22:45

问题不是梯度 - 给你的<h2>元素一个坚实的背景看。相反，您需要围绕<h2>以及包装<div>的角落。

将border-radius: 10px 10px 0 0;和适当的供应商特定版本添加到<h2>样式和它的所有作品。

来源

2011-01-13 17:05:50 Chowlett

该解决方案适用于除IE以外的所有浏览器。我只在IE9中试过，渐变填充似乎“流过”边界。（或者我错过了什么？）请参阅：http://stackoverflow.com/questions/4692686/ie9-border-radius-and-background-gradient-bleeding – cfouche 2011-07-12 07:35:46

圆角在IE8或更低版本中不起作用 – Downpour046 2012-02-20 16:07:13

这不是特定背景梯度。这只是坐在圆角顶部的h2元素重叠的背景。我不是肯定这是一个严格意义上的错误，但它是相当知名的。最简单的“修复”是用背景将元素的角落四舍五入。 Example: just setup for chrome

来源

2011-01-13 17:05:07 lnrbob

overflow：hidden;不工作

但确实：

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

来源

2011-06-08 15:20:38 Thorgeir

这是一个CSS3的bug：使用CSS3渐变的圆角

回答

相关问题