2011-01-21 16 views
2

私は別のdivの中にdivを持っています。外側のdivは、CSS3を使用して丸められた枠線を持っています。問題は、内側のdivに背景色を設定すると、コーナーにブリードすることです。私が何を意味するのかを示すテストページは以下の通りです:http://www.webdevout.net/test?0OCSS3の丸い枠で内部HTML要素を切り抜くにはどうすればよいですか?

Chrome、FF、Operaで同じことが起こるので、レンダラの問題ではないと思われます。丸みを帯びたボーダーで内側のdivを作ってみるにはどうすればいいですか?内側のdivのborder-radiusを継承するように設定しても、それをカットしないと、境界線が一致しません。

EDIT:内側のdivは実際には外側のdiv内のより多くのコンテンツのヘッダーなので、内側のdivに丸い境界線を適用すると機能しません。

+0

私は、これはあなたが探している答えがあるかどうかわからないんだけど、してみてください外側のdivにパディングを追加する。それが助けになるかもしれない。 – Xavi

答えて

0

内側のdivの丸い角を設定して、外側のdivをコンテナとして使用できます(不要になった場合を除いて、不要なネスティングを取り除くだけです)。

この例を参照してください:http://www.webdevout.net/test?0Q

私はあなたの内のdivにパディングを追加して、内側のdivにあなたのCSSクラスのすべてを適用します。

+0

残念ながら、内部divは実際にはその下位のコンテンツのヘッダーです。私はこの例のために物事を単純化しました。より良い解決策がそれ自体では提示されない場合、私は内部のすべてのオブジェクトの部分的な境界線と丸い角でそれを偽造することができるかもしれません。 – BitLooter

+0

あなたの内側のdivに丸めの度合いを下げる必要があります(例:http://www.webdevout.net/test?0Rを参照)。補足として、Chrome/SafariではWebkitの丸めクラスは必要ありません) – nybbler

+0

@Xavi外側のdivにパディングを追加し、内側のdivと同じ背景色を設定する必要があります。なぜ私はそれを考えなかったのですか? – nybbler

0

オーバーフロー:隠されているはずです...実際には、内側のコンテナにもう1つの丸い角がありません。

+0

あなたが言っているように、オーバーフロー:隠しは機能せず、コーナーが完全に整列していないので、内側のコンテナの丸めが十分ではありません。 – BitLooter

+0

@BitLooter - 境界線の半径でフィーリングし、内部コーナーを正しく整列させることができます – Endophage

0

できません。これらの領域は要素の境界線で占められ、変更することはできません。それは余分なマークアップやCSSがなくてもそれを取り除くことができないと言うことではありませんが、通常は、いいえ。

関連する問題