ボーダー半径は内部要素には影響しません

Question

ページコンテンツのすべてが丸い角のボックス内にあるレイアウトがあります。これにはページのタイトルなどが含まれます。私は、ヘッダーの内容を含むdiv要素、ページの主な内容を含むdiv要素、フッターを含むdiv要素を持っています。私の問題はこれです：私の "ヘッダ" divの境界は丸められていないので、大きな "コンテナ" divは一番上に丸められていないようです。私は調査して、これが単に "コンテナ" divの上にそれ自身を重ねる "ヘッダ" divであることを示しました。ここに例があります：http://jsfiddle.net/V98h7/。

"ヘッダー" divの境界を同じ範囲で丸めようとしましたが、境界線に小さな欠陥が作成されます（境界線が "ヘッダー" divの背景色となります） 。 私はまた、コンテナのZ-インデックスを大きな数に設定しようとしました。それは何もしなかった。

私はこの問題の簡単な解決策があるはずです。私はJavaScriptの修正を望んでいません。私はCSSが好きですが、LESSも大丈夫です。ここ

Answer 1

はフィドルある - http://jsfiddle.net/ashwyn/V98h7/2/

追加 -

#outer { 
    overflow:hidden 
} 

、それが動作します。

Answer 2

jsfiddle

http://jsfiddle.net/V98h7/1/

ちょうどラウンドボーダーコーナーに更新がborder-radiusのでborder-radius: 20px 20px 0 0;がトップからあなたの内側のdivを丸めます4つの値TOP-LEFT RADIUSTOP-RIGHT RADIUSBOTTOM-RIGHT RADIUSBOTTOM-LEFT-RADIUS

を取ることができています。親divの半径値と同じ半径値を使用することを忘れないでください。

Answer 3

コンテナdivにヘッダーdivよりもわずかに大きなボーダー半径（上部の2つのコーナー）を与えてみてください。ここで

Answer 4

使用この：

#outer { overflow: hidden; } 

またはこの：

#inner1 { 
    border-top-left-radius: 20px; 
    border-top-right-radius: 20px; 
} 

それとも、多分これを試すことができます。

#outer div:first { 
    border-top-left-radius: 20px; 
    border-top-right-radius: 20px; 
} 

（注：私は上記の最後のオプションをテストしていません）。