丸い角を持つ外側divの境界線がCSS3グラデエットの内側要素によってカットオフしている問題が発生しています。これはCSS3のバグですか？もしそうなら、私はうれしくバグレポートを提出します。これはCSS3のバグですか？CSS3グラデーションの角が丸くなっています
もしそうでない場合は、どうすればよいですか？ここ
ソース&デモ： http://jsfiddle.net/joshuamcginnis/2aJ8X/
スクリーンショット：
問題はグラデーションではありません。あなたの<h2>要素には、目立つような背景があります。その代わりに、<h2>のコーナーと、ラップ<div>のコーナーを丸める必要があります。
border-radius: 10px 10px 0 0;と適切なベンダー固有のバージョンを<h2>スタイリングに追加すると、すべて機能します。
このソリューションはIE以外のすべてのブラウザで機能します。私は、グラデーションの塗りつぶしが境界を越えて流れるように見えるIE9でのみ試みました。 （または何かが欠けていますか？）参照：http://stackoverflow.com/questions/4692686/ie9-border-radius-and-background-gradient- bleeding – cfouche
丸められたコーナーはIE8以下では機能しません – Downpour046
この解決策はありませんコンテナにオーバーフローがある場合は表示され、スクロール可能な場合は問題ありません。すぐに問題に直面しています... – vsync
これは、バックグラウンドのグラデーションに固有ではありません。これは、丸みを帯びたコーナーの上に重なるh2要素の背景にすぎません。私はではありませんそれは厳しい意味でのバグですが、それはかなりよく知られています。最も簡単な「修正」は、背景の要素の角を丸めます。 Example: just setup for chrome
オーバーフロー：非表示。
を動作しますが、これは行いません。
h2
{
position:relative;
z-index:-1;
....
}
素晴らしいソリューションです。 – vsync
、それはあなたが丸みを帯びた角の異なる要素に背景を設定かなり一般的な問題です。 – Spudley