<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Abgerundete Ecken - Cascading Style Sheets - Workshop Internet-Präsenz</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="DE" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta name="description" content="Übung Cascading Style Sheets. Abgerundete Ecken." /> <meta name="keywords" content="HTML, Cascading Style Sheets" /> <meta name="author" content="Roland Unger" /> <style type="text/css"> <!-- p { padding: 0.5em; border: solid 3px #000; -moz-border-radius: 0.75em; border-radius: 0.75em; } --> </style> </head> <body> <h1>Workshop Internet-Präsenz</h1> <h2>Abgerundete Ecken - Cascading Style Sheets</h2> <p>Der Standard CSS Level 3 wird die Verwendung abgerundeter Ecken spezifizieren. Die Standardisierung ist aber noch abgeschlossen. Einen ersten Eindruck kann man aber bereits mit Mozilla Firefox (Mozilla Suite) bekommen, weil hier dieses Feature bereits implementiert ist. Momentan muss man aber aufgrund der nochlaufenden Standardisierung die Mozilla-interne Eigenschaftsbezeichnung wählen.</p> <p>Mozilla-Eigenschaften:</p> <ul> <li>-moz-border-radius: radius (für alle vier Ecken; es lassen sich auch zwei, drei oder vier Werte ähnlich der <em>border</em>-Definition angeben, so dass die Ecken auch einzeln spezifizeiert werden können. Die Reihung beginnt in der linken oberen Ecke.)</li> <li>Für die Definition einer einzelnen Ecke gibt es die Eigenschaften <ul> <li>-moz-border-radius-topleft: radius</li> <li>-moz-border-radius-topright: radius</li> <li>-moz-border-radius-bottomleft: radius</li> <li>-moz-border-radius-bottomright: radius</li> </ul></li> </ul> <p>Aktuelle CSS3-Spezifikation:</p> <ul> <li>border-radius: radius <em>oder</em><br /> border-radius: laenge-x laenge-y (Ecken können nicht nur mit Viertelkreisen, sondern auch mit Viertelellipsen dargestellt werden. laenge-x und laenge-y stellen die Entfernungen vom Ellipsenschwerpunkt dar).</li> <li>border-top-right-radius: laenge-x laenge-y</li> <li>border-bottom-right-radius: laenge-x laenge-y</li> <li>border-bottom-left-radius: laenge-x laenge-y</li> <li>border-top-left-radius: laenge-x laenge-y</li> </ul> <p>Mehr zu dieser Thematik finden Sie auf den Seiten des WWW Consortiums und der Mozilla-Entwicklergemeinde:</p> <ul> <li><a href="http://www.w3.org/TR/2005/WD-css3-background-20050216/" target="_top">CSS3 Backgrounds and Borders Module</a></li> <li><a href="http://developer-test.mozilla.org/en/docs/Creating_a_Skin_for_Mozilla:In-Depth" target="_top">Creating a Skin for Mozilla: In-Depth</a></li> </ul> </body> </html>