36

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

「ヘッダー」の境界を同じ程度に丸めようとしましたが、これにより境界に小さな欠陥が生じます (「ヘッダー」の背景色のdiv独自の境界が得られます)。div必死になって、コンテナの z-index を大きな数値に設定してみました。それは何もしませんでした。

この問題には簡単な解決策が必要だと思います。JavaScript の修正は必要ありません。私はCSSの方が好きですが、LESSもOKです。

4

5 に答える 5

81

ここにフィドルがあります - http://jsfiddle.net/ashwyn/V98h7/2/

追加 -

#outer {
   overflow: hidden;
}

そしてそれはうまくいくでしょう。

プロパティの詳細については、overflowMDN を参照してください。

于 2012-06-13T05:25:38.453 に答える
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;
}

(注: 上記の最後のオプションはテストしていません)。

于 2012-06-13T05:28:47.937 に答える
0

これが更新jsfiddleです

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

境界の角を丸くborder-radiusするには、4 つの値を取ることができますTOP-LEFT RADIUS TOP-RIGHT RADIUS BOTTOM-RIGHT RADIUS BOTTOM-LEFT-RADIUS

内側のdivを上border-radius: 20px 20px 0 0;から丸めます。親 div と同じ半径値を使用することを忘れないでください。そうしないと、余分な境界線が表示されます。

于 2012-06-13T05:24:55.383 に答える
-1

ヘッダー div よりもコンテナー div の境界線の半径 (上部の 2 つの角) を少し大きくしてみてください。

于 2012-06-13T05:25:29.173 に答える