Hinzufügen abgerundeter Ecken mit CSS3

Sie können das Erscheinungsbild einer Website optimieren, indem Sie die Ecken von Layoutelementen mit Cascading Stylesheets (CSS), Level 3 (CSS3), abrunden. In diesem Thema werden ein paar einfache Möglichkeiten vorgestellt, wie Sie das Layout Ihrer Website mit der neuen in Windows Internet Explorer 9 integrierten Unterstützung für abgerundete Ecken ansprechender gestalten können.Das Thema umfasst die folgenden Abschnitte:

Ausgangspunkt

Zur Veranschaulichung der in diesem Thema beschriebenen Aufgaben beginnen wir mit einer ganz einfachen Webseite. Diese Seite ist für ein fiktives Kaffeeröstereiunternehmen vorgesehen und enthält HTML-Code, Cascading Stylesheets (CSS) und ein paar Bilder. Sie können das HTML und das CSS anzeigen und herunterladen. Im folgenden Bildschirmfoto ist die ursprüngliche Webseite dargestellt.

Bildschirmfoto der ursprünglichen Seite

Wichtig  

Wenn Sie eigene Webseiten erstellen und dabei die Vorteile der in Internet Explorer 9 eingeführten Unterstützung neuer Webstandards nutzen möchten, müssen Sie sicherstellen, dass Sie oben auf der Seite die folgende !DOCTYPE-Direktive verwenden:


<!DOCTYPE html>

Dadurch wird sichergestellt, dass die Seite in Internet Explorer 9 im "Internet Explorer 9-Standards-Modus" unter Verwendung der Unterstützung der neuesten Standards gerendert wird. Weitere Informationen finden Sie unter Definieren der Dokumentkompatibilität.

In diesem Layout tragen die Felder (wie auch in vielen anderen Layouts) dazu bei, Inhalte visuell voneinander zu trennen und optisch interessanter zu gestalten. Dieses Layout ist aber trotzdem noch ziemlich einfach und unspektakulär. Mit Internet Explorer 9 und CSS3 können Sie jedoch die Ecken dieser Felder abrunden.

Wenn Sie in Internet Explorer 9 abgerundete Ecken mit CSS3 erstellen, erhalten Sie eine stabile Lösung mit vielen Kombinationsmöglichkeiten. In diesem Thema konzentrieren wir uns auf drei Bereiche des Beispiellayouts, die in der folgenden Abbildung hervorgehoben sind:

  • Den Rahmen der Miniaturbilder mit den Kaffeebohnen (durch den product_thumb-Klassenselektor definiert)
  • Die Randleiste rechts auf der Seite (durch densidebar-ID-Selektor definiert)
  • Die gelben Kopfbänder oben und unten auf der Seite (durch die ID-Selektoren header und footer definiert)
In diesem Thema wird beschrieben, wie Sie den hervorgehobenen Bereichen abgerundete Ecken hinzufügen.

Gleichmäßiges Abrunden aller Ecken

Wir beginnen mit den Kaffeebohnen-Miniaturbildern und verleihen ihnen weniger kantige Ecken. Verwenden Sie die border-radius-Eigenschaft mit einem Wert, um alle Ecken eines Felds gleichmäßig abzurunden. (Der Wert kann entweder als Längenwert oder als Prozentwert angegeben werden. Prozentwerte basieren auf der Gesamthöhe oder -breite. In diesem Thema werden bei allen Beispielen Längenwerte verwendet.) Damit Sie diese Eigenschaft in ihrer einfachsten Form verwenden können, geben Sie den Radius des Kreises an, mit dem die Form jeder Ecke des Felds definiert wird. In der folgenden Abbildung wurde ein border-radius von 20 Pixeln für das Rechteck festgelegt. Achten Sie darauf, wie die Rundung der Ecken durch die Kreise definiert wird.

Veranschaulichung von "border-radius" in einem Rechteck

Aktuell handelt es sich bei dem CSS, das die Darstellung der Miniaturansichten definiert, um den folgenden Klassenselektor:


.product_thumb {
  clear: left;
  height: 80px;
  width: 80px;
  margin-right: 10px;
  padding: 5px;
  float: left;
  border-width: 1px;
  border-color: #7f7f7f;
  border-style: dashed;
}

Dadurch wird jede Miniaturansicht in Internet Explorer 9 wie folgt dargestellt:Miniaturbild im ursprünglichen Design

Nun fügen wir die border-radius-Eigenschaft hinzu und weisen ihr einen Wert von 5 Pixeln hinzu. Hierzu wird dem product_thumb-Klassenselektor die folgende Zeile hinzugefügt:


  border-radius: 5px;

Nachdem Sie dem Selektor diese Zeile hinzugefügt haben, werden alle Rahmen der Miniaturbilder mit den Kaffeebohnen wie in der nachstehenden Abbildung angezeigt:

Miniaturbild mit der auf 5 Pixel festgelegten "border-radius"-Eigenschaft

Separates Abrunden mehrerer Ecken

Jetzt befassen wir uns mit der Randleiste. Aktuell handelt es sich bei dem CSS, das die Darstellung der Randleiste definiert, um den folgenden ID-Selektor:


#sidebar {
  font-size: 12px;
  padding: 15px;
  margin: 20px 0px 10px 75%;
  border-style: dashed;
  border-color: #996600;
  border-width: 5px;
}

Dadurch wird die Randleiste in Internet Explorer 9 wie folgt dargestellt:

Randleiste im ursprünglichen Design

Wir können die linke obere Ecke mit einer breiteren Rundung versehen als die übrigen Ecken. Hierzu können wir eine von zwei Methoden anwenden. Bei der ersten Methode wird eine der border-radius-Eigenschaften verwendet. .

Die border-radius-Eigenschaften umfassen Folgendes:

Wir können einige dieser Eigenschaften verwenden, um den Leerraum in der linken oberen Ecke der Randleiste auszufüllen. Und außerdem können wir im unteren Teil der Randleiste ein paar interessante Rundungen hinzufügen.

Wir fügen jetzt dem sidebar-ID-Selektor die folgenden Zeilen hinzu:


  border-top-left-radius: 10em;
  border-bottom-right-radius: 5em;
  border-bottom-left-radius: 2em;

Nach dem Hinzufügen dieser Zeilen zum Selektor wird die Randleiste wie in der nachstehenden Abbildung angezeigt:

Randleiste, für die die linke obere Ecke auf einen "border-radius" von 10 ems, die rechte untere Ecke auf 5 ems und die linke untere Ecke auf 2 ems festgelegt ist

Sie können auch die Ecken der Randleiste separat abrunden, indem Sie die border-radius-Eigenschaft als Kompakteigenschaft verwenden. Wenn Sie mehrere Werte für die border-radius-Eigenschaft eingeben, sind die Rundungen der einzelnen Ecken je nach Reihenfolge der Werte unterschiedlich. So kann dasselbe Ergebnis für das Randleistenbeispiel erzielt werden, wenn Sie dem Selektor die folgende Zeile hinzufügen:


  border-radius: 10em 0 5em 2em;

Die Reihenfolge der Werte in der "border-radius"-Eigenschaft lautet wie folgt:


  border-radius: ul ur lr ll;

Hier stellt ul die linke obere Ecke, ur die rechte obere Ecke, lr die rechte untere Ecke und ll die linke untere Ecke dar. Wenn einer dieser Werte einen Längenwert von "Null" aufweist, bedeutet dies, dass keine Rundung erstellt wird. Die Ecke bleibt als rechter Winkel bestehen. Die Reihenfolge der Werte ist in der folgenden Abbildung dargestellt.

Diagramm zur Veranschaulichung der "border-radius"-Eigenschaft mit mehreren Werten

Wir könnten auch einfach zwei oder sogar drei Werte für die border-radius-Eigenschaft verwenden, um unterschiedliche Ergebnisse zu erzielen. Probieren Sie es einfach aus. Eine ausführliche Erläuterung des Verhaltens dieser Eigenschaft finden Sie auf der Referenzseite zur border-radius-Eigenschaft auf MSDN.

Abrunden von Ecken mit Ellipsen

Bisher haben wir nur mit abgerundeten Ecken gearbeitet, die durch Kreise definiert werden. Mit der border-radius-Eigenschaften können auch durch Ellipsen definierte Ecken mit verschiedenen horizontalen (x) und vertikalen (y) Radien erstellt werden.

Hier werden wir die beiden oberen Ecken des Felds, die durch den header-ID-Selektor definiert sind, sowie die beiden unteren durch den footer-ID-Selektor definierten Ecken mit zwei Ellipsen abrunden.

Da Ellipsen zum Definieren der linken oberen und der rechten oberen Ecke der Kopfzeile verwendet werden sollen, müssen Sie dem header-Selektor die folgenden zwei Zeilen hinzufügen:


  border-top-left-radius: 50px 25px;
  border-top-right-radius: 50px 25px;

Wenn Sie Ellipsen zum Definieren der linken unteren und der rechten unteren Ecke der Fußzeile verwenden möchten, müssen Sie dem footer-Selektor die folgenden zwei Zeilen hinzufügen:


  border-bottom-left-radius: 15px 30px;
  border-bottom-right-radius: 15px 30px;

Bei allen einzelnen border-radius-Eigenschaften entspricht der erste Wert dem horizontalen Radius der Ellipse, die die Ecke definiert, und der zweite Wert entspricht dem vertikalen Radius. Dies ist in der folgenden Abbildung dargestellt:

Bei den "border-radius"-Eigenschaften entspricht der erste Wert dem horizontalen Radius der Ellipse, die die Ecke definiert, und der zweite Wert entspricht dem vertikalen Radius.

Sie können auch die border-radius-Eigenschaft als Kompakteigenschaft verwenden, um die elliptisch abgerundeten Ecken in einer einzigen Zeile zu definieren. Die Reihenfolge der Werte in der border-radius-Eigenschaft lautet wie folgt:

border-radius: ulx urx lrx llx / uly ury lry lly;

Mit den Werten vor dem Schrägstrich ('/') werden die horizontalen Achsen (x-Achsen) jeder Ecke definiert, und mit den Werten hinter dem Schrägstrich werden die vertikalen Achsen (y-Achsen) definiert. Hier stellt ulx die horizontale Achse der linken oberen Ecke und urx die horizontale Achse der rechten oberen Ecke dar usw. Außerdem stellt uly die vertikale Achse der linken oberen Ecke und ury die vertikale Achse der rechten oberen Ecke dar usw. Die Reihenfolge der Werte ist in der folgenden Abbildung dargestellt.

Diagramm zur Veranschaulichung der "border-radius"-Eigenschaft als zusammengesetzte Eigenschaft und der entsprechenden Maße

Wenn dem header-ID-Selektor die folgende Zeile hinzugefügt wird, erzielen wir dieselben Ergebnisse wie zuvor:


border-radius: 50px 50px 0 0 / 25px 25px 0 0;

Und auf die gleiche Weise erzielen wir dieselben Ergebnisse wie zuvor, wenn dem footer-ID-Selektor die folgende Zeile hinzugefügt wird:


border-radius: 0 0 15px 15px / 0 0 30px 30px;

Abrunden von Ecken mit anderen Browsern

Da CSS3 noch ein ganz neuer Standard ist, werden dieborder-radius-Eigenschaften momentan noch nicht von allen Browsern gleichermaßen unterstützt. Einige ältere Versionen von Browsern bieten zwar Unterstützung für die border-radius-Eigenschaften, jedoch nur in Verbindung mit dem entsprechenden herstellerspezifischen Präfix am Anfang. (Weitere Informationen zu herstellerspezifischen Präfixen finden Sie im entsprechenden Blogbeitrag zu Herstellererweiterungen bei CSS von Microsoft des Internet Explorer-Teams) Andere Browser bieten unterschiedliche Unterstützung für die zuvor erwähnte Schrägstrichnotation ('/'), und einige Browser bieten eine eingeschränkte Unterstützung für elliptische Rahmen (im Gegensatz zu kreisförmigen Rahmen).

Besuchen Sie die Website des jeweiligen Browserherstellers, um die Abwärtskompatibilität mit einer älteren Browserversion sicherzustellen. Je nach Browser und Version können Sie möglicherweise auch einfach die border-radius-Eigenschaften mit dem entsprechenden herstellerspezifischen Präfix kopieren. Mit dem folgenden Selektor werden beispielsweise in Internet Explorer 9 dieselben Ergebnisse für abgerundete Ecken erzielt wie in aktuellen und älteren Versionen von Mozilla Firefox, Apple Safari, Google Chrome und Opera:


.my_selector {
  ...
  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
}

Je komplexer die abgerundeten Ecken jedoch sind, desto geringer ist die Wahrscheinlichkeit, dass sich die border-radius-Syntax übertragen lässt. In diesem Fall sollten Sie Website des Browserherstellers besuchen:

Zusammenfassung

Sehen Sie sich an, wie die Seite von Fourth Coffee aussieht, nachdem alle in diesem Thema beschriebenen Änderungen vorgenommen (und die für andere Browser herstellerspezifischen Eigenschaftennamen hinzugefügt) wurden: HTML für aktualisierte Seite; CSS für aktualisierte Seite.

Abrunden von Ecken mit älteren Internet Explorer-Versionen

In Internet Explorer 9 werden die border-radius-Eigenschaften erstmals unterstützt. Wenn Sie dem Layout abgerundete Ecken hinzufügen möchten, die auch Benutzern von Windows Internet Explorer 8 und früheren Versionen ordnungsgemäß angezeigt werden, können Sie eine der vielen im Web verfügbaren alternativen Lösungen nutzen. Neben einzelnen Lösungen für abgerundete Ecken sind auch Sites mit häufig aktualisierten Listen von Lösungen für abgerundete Ecken verfügbar, die mit mehreren Versionen von Internet Explorer und mit anderen Browsern kompatibel sind.

Nachstehend sind ein paar unserer bevorzugten Sites für gesammelte Lösungen für abgerundete Ecken aufgelistet. (Die Aufnahme eines Links bedeutet nicht, dass Microsoft den Inhalt dieser verknüpften Site billigt.)

Verwandte Themen

Contoso Images-Fotogalerie
Erstellen ansprechender Schaltflächen mit CSS3
Hinzufügen von Schlagschatten mit CSS3
CSS3

 

 

Anzeigen:
© 2014 Microsoft