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!
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;
}
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;
}
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.
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.