web-dev-qa-db-ja.com

境界半径は内部要素に影響を与えません

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

「ヘッダー」divの境界線を同じ程度に丸めようとしましたが、これにより境界線に小さな欠陥が作成されます（「ヘッダー」divの背景色の独自の境界線が作成されます）。必死で、コンテナのz-indexも大きく設定してみました。 THatは何もしませんでした。

この問題には簡単な解決策があるはずだと思います。 javascriptの修正は必要ありません。私はCSSを好みますが、LESSでも問題ありません。

lesscss
24
diracdeltafunk

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

追加 -

#outer {
   overflow: hidden;
}

そしてそれは動作します。

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

58
Ashwin

これを使って：

#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;
}

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

4
Silvio Delgado

Cssボーダー半径の背景色のにじみとボーダー半径を壊す内部要素のボーダー修正。これは、奇妙な境界の不具合に役立つ可能性があります。

/* useful if you don't want a bg color from leaking outside the border: */
-moz-background-clip: padding; 
-webkit-background-clip: padding-box;
background-clip: padding-box;

この参照はここで見つかりました http://css3please.com/ by https://stackoverflow.com/a/7052769/907188

0
Goodmedalist

これがアップデートjsfiddleです

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

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

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

0
Rishabh