web-dev-qa-db-de.com

Abgerundete Ecken an DIVs mit Hintergrundfarbe

Ich habe einen Code, der so aussieht:

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

Das Shell-Div hat einen grauen Rand, an dem ich abgerundete Ecken haben möchte. Das Problem, dem ich begegne, ist, dass der Titel div einen grünen Hintergrund hat und die abgerundeten Ecken der Shell überlappt. Es überlappt sich entweder nicht oder ragt nicht an den Rändern hervor, um ein fließendes Aussehen zu erzielen.

Ich suche nach einer Lösung, die abwärtskompatibel zu IE 7 und 8 ist, aber wenn es eine einfache Lösung in HTML5 gibt, wäre ich bereit, diese Browser zu verlieren.

Vielen Dank!

19
Dexter

In Ihrem Markup müssen Sie sowohl #Shell als auch #title einen Randradius zuweisen, damit die scharfen Ecken von #title nicht mit #Shell überlappen.

Ein Live-Beispiel, 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;
}
32

Eine andere Möglichkeit, dies zu erreichen, bestand darin, das äußere Div so einzustellen, dass ein Überlauf ausgeblendet wird

#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/

22
obiyoda

Sie sollten wahrscheinlich nur die oberen beiden Ecken des Title-Div mit dem gleichen Radius wie das Shell-Div abrunden, damit sie nicht überlappen. Das CSS3, das Sie verwenden würden, ist:

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

Für die Abwärtskompatibilität mit alten Mozilla-Browsern sollten Sie auch Folgendes verwenden:

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

Und für ältere Versionen von WebKit-Browsern (hauptsächlich Safari) können Sie Folgendes verwenden:

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

Alte Internet Explorer-Browser können, soweit ich weiß, nichts tun, außer Bilder zu verwenden.

3
EdoDodo

Internet Explorer unterstützte den Border-Radius bis IE9 nicht, sehr zum Frust der Entwickler und Designer. Bei IE9 verwenden Sie den Edge-META-Tag und geben den Randradius an:

<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>

Quelle - http://davidwalsh.name/css-rounded-corners

Ich würde lieber Bilder verwenden, aber IE kann den Bach runtergehen. Microsoft sollte sein Spiel verbessern und CSS3 unterstützen.

0

Sie können PIE mit IE7 und 8 verwenden. Es aktiviert einige CSS3-Funktionen in IE7 und IE8. Und ja, ich weiß, es ist kein Browser, es ist ein Schmerz. Vielleicht ein Fluch.

Sie können es hier überprüfen.

0
leon