Rahmen & Konturen
border und outline bieten bei die Möglichkeit ein Element mit einem Rahmen zu versehen. Dabei gibt es aber einen wichtigen Unterschied. Die Angabe border gehört zur Gesamtgröße des Elementes, verschiebt also die umliegenden Elemente. Die Angabe outline dagegen, vergrößert das Element nicht, sondern wird über den umliegenden Elementen dargestellt. Das folgende Beispiel hat einen schwarzen Rand von 1 Pixel Stärke, sowie eine 5 Pixel starke, braune Kontur.
.Ich bin ein Beispiel für border und outline,
Inhalt
und zeige auch gleich den Hauptunterschied der beiden
Stylesheetangaben.
Angaben für Rahmen
| Eigenschaft |
mögliche Werte |
Beschreibung |
border-color
|
eine Farbangabe, transparent, inherit |
Farbangabe für den Rahmen |
| border-[top|right|bottom|left]-color |
eine Farbangabe, transparent, inherit |
Farbangabe für eine einzelne Seite des Rahmens |
| border-style |
none, solid, dotted, dashed, double, groove, ridge, inset, outset, inherit |
Art des Rahmens |
| border-[top|right|bottom|left]-style |
none, solid, dotted, dashed, double, groove, ridge, inset, outset, inherit |
Art des Rahmens einer einzelnen Seite |
| border-width |
|
|
| border-[top|right|bottom|left]-width |
|
|
| border |
|
|
| border-[top|right|bottom|left] |
|
|
Angaben für Konturen
| Eigenschaft |
mögliche Werte |
Beschreibung |
| outline-color |
eine Farbangabe, inherit |
Farbangabe der Kontur |
| outline-[top|right|bottom|left]-color |
eine Farbangabe, inherit |
Farbangabe der Kontur einer einzelnen Seite |
| outline-style |
none, solid, dotted, dashed, double, groove, ridge, inset, outset, inherit |
Art der Kontur |
| outline-[top|right|bottom|left]-style |
none, solid, dotted, dashed, double, groove, ridge, inset, outset, inherit |
Art der Kontur einer einzelnen Seite |
| outline-width |
|
|
| outline-[top|right|bottom|left]-width |
|
|
| outline |
|
|
CSS 3 Angaben
| Eigenschaft |
mögliche Werte |
Beschreibung |
| border-radius |
|
|
| border-[top|right|bottom|left]-radius |
|
|
| border-image-source |
|
|
| border-image-slice |
|
|
| border-image-width |
|
|
| border-image-outset |
|
|
| border-image-repeat |
|
|
| border-image |
|
|
| box-decoration-break |
|
|
| box-shadow |
|
|
letzte Änderung: 13.02.2010