這是一個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漸變的圓角

回答

相關問題