web-dev-qa-db-ja.com

背景色のあるDIVの角丸

次のようなコードがあります。

<div id="Shell">
    <div id="title">TITLE HERE</div>
    <div id="content">Article Content Goes Here</div>
</div>

シェルdivには、角を丸くしたいグレーの境界線があります。私が直面している問題は、タイトルdivの背景が緑色で、シェルの丸い角に重なっていることです。それは、滑らかな外観を提供するために、エッジに重なるか、または突き出ません。

IE 7および8と後方互換性のあるソリューションを探していますが、HTML5にシンプルなソリューションがあれば、これらのブラウザーを失うことをいとわないでしょう。

ありがとう！

csshtml5rounded-corners
20
Dexter

マークアップでは、両方にボーダー半径を与える必要があります#Shellおよび#titleそのため、#titleの鋭い角は重ならない#Shell 's。

ライブの例、 http://jsfiddle.net/BXSJe/4/

#Shell {
 width: 500px;
 height: 300px;
 background: lightGrey;
 border-radius: 6px;
}

#title {
 background: green;
 padding: 5px;
 border-radius: 6px 6px 0 0;
}
33
Mridul Kashatria

これを実現する別の方法は、外側のdivに非表示へのオーバーフローを設定することでした

#Shell {
 width:500px;
 height:300px;
 background:lightGrey; 
 border-radius: 10px 10px 10px 10px;
 overflow:hidden;
}
#title {
 background:green;
 padding:5px;
}

http://jsfiddle.net/jdaines/NaxuK/

23
obiyoda

おそらく、タイトルdivの上部の2つの角だけを、シェルdivと同じ半径で丸めて、重ならないようにする必要があります。使用するCSS3は次のとおりです。

border-top-left-radius: XXpx
border-top-right-radius: XXpx

古いMozillaブラウザとの後方互換性のために、以下も使用する必要があります。

-moz-border-radius-topleft: XXpx
-moz-border-radius-topright: XXpx

また、古いバージョンのWebKitブラウザー（主にSafari）では、次を使用できます。

-webkit-border-top-left-radius: XXpx
-webkit-border-top-right-radius: XXpx

ただし、画像を使用する以外は、古いInternet Explorerブラウザについてできることは何もありません。

3
EdoDodo

Internet ExplorerはIE9までボーダーラディウスをサポートしていませんでした。これは開発者とデザイナーの不満に大きなものでした。 IE9での重要な手順は、Edge METAタグを使用して境界線の半径を提供することです。

<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<style>
border-top-right-radius: 7px;
border-top-left-radius: 7px;
border-bottom-right-radius: 2px;
border-bottom-left-radius: 2px;
</style>

ソース- http://davidwalsh.name/css-rounded-corners

私はむしろ画像を使用したいのですが、IEはドレインを減らすことができます。Microsoftはゲームを強化し、CSS3をサポートする必要があります。

0
Michael Schwartz

IE7および8で [〜＃〜] pie [〜＃〜] を使用できます。IE7およびIE8でCSS3機能を有効にします。そして、はい、私は知っています、それはブラウザではありません、それは苦痛です。たぶん呪い。

確認できます こちら 。

0
leon