CSS/Tutorials/Boxmodell/Rahmen: Unterschied zwischen den Versionen

Aus SELFHTML-Wiki
< CSS‎ | Tutorials‎ | Boxmodell
Wechseln zu: Navigation, Suche
(→‎Verweis auf neuen Artikel für Farbangaben umgearbeitet.)
(→‎border-radius (Rahmenabrundung): ist inziwschen in alle aktuellen Browser implementiert)
Zeile 316: Zeile 316:
 
                         width:20em;}
 
                         width:20em;}
  
−
       .roundedCorners  {-moz-border-radius:    2em;
+
       .roundedCorners  {-moz-border-radius:    2em; <!-- alte Gecko-Browser -->
−
                         -webkit-border-radius: 2em;
+
                         -webkit-border-radius: 2em; <!-- alte Webkit-Browser -->
 
                         border-radius:        2em;}
 
                         border-radius:        2em;}
  
Zeile 346: Zeile 346:
 
}}
 
}}
 
}} <!-- end of Beispiel -->
 
}} <!-- end of Beispiel -->
−
 
 
}} <!-- end of verbergen -->
 
}} <!-- end of verbergen -->
−
 
 
Mit <code>border-radius:</code> können Sie den Radius der Abrundung für ein Element angeben. Erlaubt ist ein Paar [[Doku:CSS/Grundlagen_von_CSS/Erlaubte_Wertetypen/Zahlen,_Maße_und_Maßeinheiten|numerischer Angaben]].  
 
Mit <code>border-radius:</code> können Sie den Radius der Abrundung für ein Element angeben. Erlaubt ist ein Paar [[Doku:CSS/Grundlagen_von_CSS/Erlaubte_Wertetypen/Zahlen,_Maße_und_Maßeinheiten|numerischer Angaben]].  
  
Zeile 368: Zeile 366:
  
 
{{Beachten|Die Werte werden nicht durch Kommata getrennt.}}
 
{{Beachten|Die Werte werden nicht durch Kommata getrennt.}}
−
 
−
{{Achtung|Die Eigenschaft <code>border-radius</code> ist noch nicht in alle aktuellen Browser implementiert, deshalb muss man [[Doku:CSS/Grundlagen_von_CSS/Allgemeines_und_Syntax#Herstellerspezifische_Eigenschaften|proprietäre Eigenschaften]] verwenden.
 
−
 
−
Für Firefox:
 
−
* <code>-moz-border-radius</code>
 
−
* <code>-moz-border-radius-topright</code>
 
−
* <code>-moz-border-radius-bottomright</code>
 
−
* <code>-moz-border-radius-bottomleft</code>
 
−
* <code>-moz-border-radius-topleft</code>
 
−
* Prozentangaben werden grundsätzlich auf die halbe Höhe des Elements bezogen.
 
−
 
−
Für Safari und Chrome
 
−
* <code>-webkit-border-radius</code>
 
−
* Ein Wertepaar wird durch Leerzeichen getrennt, deshalb gibt es hier keine zusammenfassende Eigenschaft.
 
−
* <code>-webkit-border-top-right-radius</code>
 
−
* <code>-webkit-border-bottom-right-radius</code>
 
−
* <code>-webkit-border-bottom-left-radius</code>
 
−
* <code>-webkit-border-top-left-radius</code>
 
−
}}
 
−
 
−
{{Hinweis|Sie sollten bei der Definition solcher noch nicht umfassend verbreiteter Eigenschaften die herstellerspezifischen Angaben immer vor der standardisierten Form machen. Da später gemachte Angaben frühere überschreiben, ist so sichergestellt, dass die standardisierten Angaben von dem Zeitpunkt an, an dem sie unterstützt werden, auch verwendet werden.}}
 
  
 
== border-image (Rahmenbild) ==
 
== border-image (Rahmenbild) ==

Version vom 9. April 2012, 10:07 Uhr

Allgemeines zu Rahmen

Empfehlung: zum besseren Verständnis wird das Studium des Artikels zum Box-Modell empfohlen

Sinnvoll sind die hier beschriebenen Angaben für border besonders für HTML-Elemente, die einen eigenen Absatz erzeugen bzw. einen Block bilden, also etwa für h[1-6], p, blockquote, address, pre sowie div oder table. Anwendbar sind sie aber auf alle Elemente. So ist es beispielsweise möglich, in HTML eine Tabelle zu notieren, in der einzelne Zellen verschiedene Rahmen nach Wunsch erhalten - nämlich mit Hilfe von CSS-Rahmeneigenschaften. Auch auf html und body lassen sich die hier aufgelisteten Eigenschaften anwenden - in diesem Fall wird um den gesamten sichtbaren Körper einer HTML-Datei ein Rahmen gezeichnet.

Wenn Sie bei Rahmendefinitionen nichts weiter angeben, kann es sein, dass die Inhalte von Elementen sehr nah an dem sie umgebenden Rahmen kleben. Zu diesem Zweck können Sie Innenabstände definieren. Dadurch schaffen Sie einen Abstand zwischen dem Rahmen und seinem Inhalt.

In der Regel werden Sie mehrere Angaben zu Rahmen kombinieren. So ist es sinnvoll, nicht nur eine Rahmendicke anzugeben, sondern auch die gewünschte Rahmenfarbe. Auch verschiedene Rahmentypen stehen zur Auswahl. Alle Rahmeneigenschaften können Sie wahlweise auf alle vier Seiten eines Elements anwenden, aber auch nur auf eine oder mehrere bestimmte Seiten.

border-width (Rahmendicke)

border-top-width, border-right-width, border-bottom-width, border-left-width

Sie können für ein Element die Rahmendicke bestimmen. Sinnvollerweise sollten Sie diese Angabe zumindest mit einer Angabe zum Rahmentyp kombinieren, gegebenenfalls aber auch mit einer Festlegung der Rahmenfarbe.

Beispiel ansehen …
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>border-width</title>
    <style type="text/css">
      p {width:   30em;
	 padding: 0 1em;}
	
      .links {border-left-width:   5px;
              border-left-style:   solid;
              border-color:        #FFCCCC;}

      .linksrechts {border-left-width:   1em;
                    border-left-style:   solid;
                    border-left-color:   red;
                    border-right-width:  1.5em;
                    border-right-style:  solid;
                    border-right-color:  green;}

      .rundrum {background-color:    lightgray;
                border-width:        6px;
                border-style:        solid;
                border-color:        gray;
	        border-right-color:  black;
	        border-bottom-color: black;}
    </style>
  </head>
  <body>
    <p class="links">Dies kennen Sie wahrscheinlich ...</p>
    <p class="linksrechts">Dies ist ... Textabsatz mit einem Rahmen links und rechts.</p>
    <p class="rundrum">Bereits mit einfachen Mitteln lassen sich interessante Effekte erzielen.</p>
  </body>
</html>

Mit border-width: können Sie die Dicke des Rahmens um ein Element bestimmen. Erlaubt ist eine numerische Angabe (mit Ausnahme von Prozentwerten) für die Rahmendicke oder einer der folgenden Werte:

  • thin = dünn.
  • medium = mittelstark.
  • thick = dick.
Beachten Sie: Eine Angabe für die Rahmendicke wird nur interpretiert, wenn auch eine Angabe für den Rahmentyp erfolgt.

Um für einzelne Seiten des Elements eine unterschiedliche Rahmendicke zu bestimmen, gibt es zwei Möglichkeiten. Die eine ist, entsprechende Werte für die Eigenschaften

  • border-top-width, definiert die Rahmendicke für oben,
  • border-right-width, die Rahmendicke für rechts,
  • border-bottom-width, die Rahmendicke für unten und
  • border-left-width, die Rahmendicke für links

anzugeben. Die zweite Variante ist, border-width, eine zusammenfassende Eigenschaft (shorthand property), zu verwenden. Dabei gelten folgende Regeln:

  • Eine Angabe: für alle 4 Rahmen gilt derselbe Wert
  • Zwei Angaben: 1. Wert für border-width-top und border-width-bottom, 2. Wert für border-width-left und border-width-right
  • Drei Angaben: 1. Wert für border-width-top, 2. Wert für border-width-left und border-width-right, 3. Wert für border-width-bottom
  • Vier Angaben: 1. Wert für border-width-top, 2. Wert für border-width-right, 3. Wert für border-width-bottom, 4. Wert für border-width-left
Beachten Sie: Die Werte werden nicht durch Kommata getrennt.

border-color (Rahmenfarbe)

border-top-color, border-right-color, border-bottom-color, border-left-color

Sie können für ein Element die Rahmenfarbe bestimmen. Die Angabe dazu sollten Sie mit einer Angabe zum Rahmentyp und/oder einer Angabe zur Rahmendicke kombinieren.

Beispiel ansehen …
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>border-width</title>
    <style type="text/css">
      p {width:   30em;
	 padding: 0 1em;}
	
      .links {border-left-width:   5px;
              border-left-style:   solid;
              border-color:        #FFCCCC;}

      .linksrechts {border-left-width:   1em;
                    border-left-style:   solid;
                    border-left-color:   red;
                    border-right-width:  1.5em;
                    border-right-style:  solid;
                    border-right-color:  green;}

      .rundrum {background-color:    lightgray;
                border-width:        6px;
                border-style:        solid;
                border-color:        gray;
	        border-right-color:  black;
	        border-bottom-color: black;}
    </style>
  </head>
  <body>
    <p class="links">Dies kennen Sie wahrscheinlich ...</p>
    <p class="linksrechts">Dies ist ... Textabsatz mit einem Rahmen links und rechts.</p>
    <p class="rundrum">Bereits mit einfachen Mitteln lassen sich interessante Effekte erzielen.</p>
  </body>
</html>

Mit border-color: können Sie die Rahmenfarbe bestimmen. Erlaubt ist eine Farbangabe oder der Wert transparent. Letzteres ergibt einen durchsichtigen Rahmen, welches interessante Effekte bei sich überlappenden Elementen ermöglicht.

Beachten Sie: Eine Angabe zur Rahmenfarbe wird nur interpretiert, wenn auch eine Angabe zum Rahmentyp erfolgt.

Um für einzelne Seiten des Elements eine unterschiedliche Rahmenfarbe zu bestimmen, gibt es zwei Möglichkeiten. Die eine ist, entsprechende Werte für die Eigenschaften

  • border-top-color, definiert die Rahmenfarbe für oben,
  • border-right-color, die Rahmenfarbe für rechts,
  • border-bottom-color, die Rahmenfarbe für unten und
  • border-left-color, die Rahmenfarbe für links

anzugeben. Die zweite Variante ist, border-color, eine zusammenfassende Eigenschaft (shorthand property), zu verwenden. Dabei gelten folgende Regeln:

  • Eine Angabe: für alle 4 Rahmen gilt derselbe Wert
  • Zwei Angaben: 1. Wert für border-color-top und border-color-bottom, 2. Wert für border-color-left und border-color-right
  • Drei Angaben: 1. Wert für border-color-top, 2. Wert für border-color-left und border-color-right, 3. Wert für border-color-bottom
  • Vier Angaben: 1. Wert für border-color-top, 2. Wert für border-color-right, 3. Wert für border-color-bottom, 4. Wert für border-color-left
Beachten Sie: Die Werte werden nicht durch Kommata getrennt.

border-style (Rahmentyp)

border-top-style, border-right-style, border-bottom-style, border-left-style

Mit dem Rahmentyp können Sie verschiedene Schmuckrahmen definieren. Damit die Typen zur Geltung kommen, empfiehlt sich die Kombination mit Angaben zur Rahmendicke und/oder zur Rahmenfarbe.

Beispiel ansehen …
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>border-style</title>
	<style type="text/css">
	   p       {margin:       10px;
	            padding:      15px;
	  	    width:        30em;
		    border-width: 5px; 
		    border-color: red;}
	   .dotted {border-style: dotted;}
	   .dashed {border-style: dashed;}
	   .solid  {border-style: solid;}
	   .double {border-style: double;}
	   .groove {border-style: groove;}
	   .ridge  {border-style: ridge;}
	   .inset  {border-style: inset;}
	   .outset {border-style: outset;}
    </style> 
  </head>
  <body>
    <p class="dotted">Textabsatz mit Rahmentyp dotted.</p>
    <p class="dashed">Textabsatz mit Rahmentyp dashed.</p>
    <p class="solid">Textabsatz mit Rahmentyp solid.</p>
    <p class="double">Textabsatz mit Rahmentyp double.</p>
    <p class="groove">Textabsatz mit Rahmentyp groove.</p>
    <p class="ridge">Textabsatz mit Rahmentyp ridge.</p>
    <p class="inset">Textabsatz mit Rahmentyp inset.</p>
    <p class="outset">Textabsatz mit Rahmentyp outset.</p>
  </body>
</html>

Mit border-style: können Sie den Rahmentyp festlegen. Erlaubt ist eine der folgenden Angaben

  • none = kein Rahmen (bzw. unsichtbarer Rahmen).
  • hidden = kein Rahmen (bzw. unsichtbarer Rahmen), gedacht für Tabellenzellen
  • dotted = gepunktet.
  • dashed = gestrichelt.
  • solid = durchgezogen.
  • double = doppelt durchgezogen.
  • groove = 3D-Effekt.
  • ridge = 3D-Effekt.
  • inset = 3D-Effekt.
  • outset = 3D-Effekt.

Um für einzelne Seiten des Elements einen unterschiedlichen Rahmentyp zu bestimmen, gibt es zwei Möglichkeiten. Die eine ist, entsprechende Werte für die Eigenschaften

  • border-top-style, definiert den Rahmentyp für oben,
  • border-right-style, den Rahmentyp für rechts,
  • border-bottom-style, den Rahmentyp für unten und
  • border-left-style, den Rahmentyp für links

anzugeben. Die zweite Variante ist, border-style, eine zusammenfassende Eigenschaft (shorthand property), zu verwenden. Dabei gelten folgende Regeln:

  • Eine Angabe: für alle 4 Rahmen gilt derselbe Wert
  • Zwei Angaben: 1. Wert für border-style-top und border-style-bottom, 2. Wert für border-style-left und border-style-right
  • Drei Angaben: 1. Wert für border-style-top, 2. Wert für border-style-left und border-style-right, 3. Wert für border-style-bottom
  • Vier Angaben: 1. Wert für border-style-top, 2. Wert für border-style-right, 3. Wert für border-style-bottom, 4. Wert für border-style-left
Beachten Sie: Die Werte werden nicht durch Kommata getrennt.

border (Rahmen allgemein)

border-top, border-right, border-bottom, border-left

Diese Angabe ist eine Zusammenfassung der möglichen Einzelangaben Rahmendicke, Rahmentyp und Rahmenfarbe.

Beispiel ansehen …
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>Border</title>
    <style type="text/css">
      h1 {border-bottom: thick double blue; float: left;}
      h2 {border-bottom: medium solid blue; float: left; clear: left;}
      p  {border: 1px solid red; width: 30em; padding: 5px; clear: left;}
      p.beachten {border: none;
                  border-left: 5px solid #FFCCCC;}
    </style>
  </head>
  <body>
    <h1>Überschrift, doppelt unterstrichen</h1>
    <h2>Teilüberschrift, einfach unterstrichen</h2>
    <p>Textabsatz begrenzter Breite, mit einem schmalen roten Rahmen</p>
    <p class="beachten">Dies kennen Sie ...</p>
  </body>
</html>
  • Überschriften nehmen als Block-Elemente normalerweise die gesamte Fensterbreite ein. Die Angaben zu float bei den Überschriften stellen sicher, dass diese nur so breit sind, wie ihr Inhalt es erfordert. Näheres dazu finden Sie unter Doku:CSS/Eigenschaften/Positionierung#Textumfluss_mit_float.
  • Für den Absatz mit der Klasse „beachten“ gilt wie für alle Absätze zunächst einmal ein kompletter roter Rahmen. Da dieser nicht erwünscht ist, wird er mit border: none; entfernt, bevor der linke Rahmen gesetzt wird.

Mit border können Sie das Aussehen eines Rahmens um ein Element bestimmen. Notieren Sie Angaben zu Linienstärke, Rahmentyp und Farbe mit Leerzeichen dazwischen:

Die Reihenfolge der Angaben ist egal. Es dürfen dabei auch nur eine oder zwei Angaben gemacht werden. Bei fehlender Farbangabe ist die Voreinstellung die Textfarbe des Elements, bei fehlender Rahmenstärke ist die Voreinstellung medium.

Hinweis:
Obwohl die Reihenfolge der Angaben beliebig ist und keine Verwechslungsgefahr besteht, sollten Sie dennoch konsequent bei einer Notation bleiben. Die meisten Werkzeuge zur Fehlersuche verwenden die Reihenfolge border: width style color;.

Daneben können Sie zusammenhängende Angaben für Rahmendicke, Rahmenfarbe und Rahmentyp auch für einzelne Seiten des Elements machen.

  • border-top definiert eine zusammenhängende Angabe für oben,
  • border-right für rechts,
  • border-bottom für unten und
  • border-left für links.

Vorlage:Beachten Sie

border-radius (Rahmenabrundung)

border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius, border-top-left-radius

Sie können für ein Element den Radius bestimmen, mit dem die Ecken abgerundet werden. In Verbindung mit Rahmendicke, Rahmentyp und Rahmenfarbe wird eine entsprechende abgerundete Rahmenlinie gezeichnet. Der Hintergrund des Elements wird entlang der Kurve abgeschnitten, auch wenn keine sichtbare Rahmenlinie vorhanden ist.

zeige vollständigen Quelltextzeige vollständigen Quelltext
Beispiel ansehen …
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>border-radius</title>
    <style type="text/css">
      .roundedCorners   {border-radius: 2em;}
      .ellipsis         {border-radius: 4em/1em;}
      .differentCorners {border-radius: 4em 3em 2em 1em;}
      .background       {border: none; background-color: #0c0;
                         border-radius: 2em;}
    </style>
  </head>
  <body>
    <p class="roundedCorners">Textabsatz mit vier gleichen abgerundeten Ecken.</p>
    <p class="ellipsis">Textabsatz mit elliptisch abgerundeten Ecken.</p>
    <p class="differentCorners">Textabsatz mit vier verschieden abgerundeten Ecken.</p>
    <p class="background">Textabsatz mit Hintergrundfarbe, aber ohne sichtbare Rahmenlinie.</p>
  </body>
</html>
Beispiel ansehen …
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>border-radius</title>
    <style type="text/css">
      p                 {border: 3px solid #c00;
                         padding:2em;
                         width:20em;}

      .roundedCorners   {-moz-border-radius:    2em; <!-- alte Gecko-Browser -->
                         -webkit-border-radius: 2em; <!-- alte Webkit-Browser -->
                         border-radius:         2em;}

      .ellipsis         {-moz-border-radius:    4em/1em;
                         -webkit-border-radius: 4em 1em;
                         border-radius:         4em/1em;}

      .differentCorners {-moz-border-radius:                 4em 3em 2em 1em;
                         -webkit-border-top-right-radius:    4em;
                         -webkit-border-bottom-right-radius: 3em;
                         -webkit-border-bottom-left-radius:  2em;
                         -webkit-border-top-left-radius:     1em;
                         border-radius:                      4em 3em 2em 1em;}

      .background       {border: none; background-color: #0c0;
                         -moz-border-radius:    2em;
                         -webkit-border-radius: 2em;
                         border-radius:         2em;}
    </style>
  </head>
  <body>
    <p class="roundedCorners">Textabsatz mit vier gleichen abgerundeten Ecken.</p>
    <p class="ellipsis">Textabsatz mit elliptisch abgerundeten Ecken.</p>
    <p class="differentCorners">Textabsatz mit vier verschieden abgerundeten Ecken.</p>
    <p class="background">Textabsatz mit Hintergrundfarbe, aber ohne sichtbare Rahmenlinie.</p>
  </body>
</html>

Mit border-radius: können Sie den Radius der Abrundung für ein Element angeben. Erlaubt ist ein Paar numerischer Angaben.

Die Angabe eines Wertepaares erzeugt eine elliptische Abrundung, wobei der erste Wert für die horizontale und der zweite Wert für die vertikale Halbachse steht. Eine Prozent-Angabe für die horizontale Halbachse bezieht sich auf die halbe Breite des Elements, eine Prozent-Angabe für die vertikale Halbachse auf die halbe Höhe. Wird nur ein Wert angegeben, so entsteht eine kreisförmige Abrundung. border-radius: 1em; ist identisch zu border-radius: 1em/1em;

Um für einzelne Seiten des Elements eine unterschiedliche Rahmendicke zu bestimmen, gibt es zwei Möglichkeiten. Die eine ist, entsprechende Werte für die Eigenschaften

  • border-top-right-radius, definiert die Abrundung für oben rechts,
  • border-bottom-right-radius, die Abrundung für unten rechts,
  • border-bottom-left-radius, die Abrundung für unten links und
  • border-top-left-radius, die Abrundung für unten links

anzugeben. Die zweite Variante ist, border-radius, eine zusammenfassende Eigenschaft (shorthand property), zu verwenden. Dabei gelten folgende Regeln:

  • Eine Angabe: für alle vier Ecken gilt derselbe Wert
  • Zwei Angaben: 1. Wert für border-top-left-radius und border-bottom-right-radius, 2. Wert für border-top-right-radius und border-bottom-left-radius
  • Drei Angaben: 1. Wert für border-top-left-radius, 2. Wert für border-top-right-radius und border-bottom-left-radius, 3. Wert für border-bottom-right-radius
  • Vier Angaben:1. Wert für border-top-left-radius, 2. Wert für border-top-right-radius, 3. Wert für border-bottom-right-radius, 4. Wert für border-bottom-left-radius
Beachten Sie: Die Werte werden nicht durch Kommata getrennt.

border-image (Rahmenbild)

Mit den Rahmenbildeigenschaften können sie ein Bild festlegen, das – in Einzelteile zerlegt – in den Rahmenbereichen eines Elements angezeigt wird. Dieses Bild ersetzt eine „gewöhnliche“ Rahmenlinie, die mit border definiert ist und überdeckt auch den Hintergrund des Elements.

Achtung!

Die Spezifikation für die border-image-Eigenschaften ist noch nicht final. Deshalb ist die Dokumentation dieser Eigenschaften möglicherweise unvollständig oder auch fehlerhaft. Aktuell unterstützen die Browser nur die zusammenfassende Eigenschaft border-image, aber nicht die Einzeleigenschaften.

Stand: Januar 2011

border-image-source (Rahmenbildquelle)

Mit border-image-source legen Sie das Bild fest, das als Rahmenbild verwendet werden soll. Der Wert ist ein URI in der Form url(Pfad-zum-Bild), wobei Pfad-zum-Bild durch die relative oder absolute Adresse des Bildes ersetzt wird.

border-image-slice (Rahmenbildzuschneidung)

Mit border-image-slice legen Sie fest, wie das Bild in Einzelteile zerschnitten wird. Sie können bis zu vier Werte angeben, die den Abstand des Schnitts zum jeweiligen Rand beschreiben. Erlaubt sind entweder Zahlen oder Prozentwerte.

Zahlen beziehen sich auf die internen Einheiten des jeweiligen Bildes, also Pixel bei Rastergrafiken wie PNG, JPG oder GIF, oder Vektor-Koordinaten in Vektorgrafiken wie z.B. SVG. Prozentwerte beziehen sich auf die Größe des Bildes, d.h. die Werte für oben und unten auf die Höhe und diejenigen für rechts und links auf die Breite.

Sie können einen bis vier Werte angeben. Dabei gelten folgende Regeln:

  • Eine Angabe: für alle 4 Schnitte gilt derselbe Abstand
  • Zwei Angaben: 1. Wert Abstand von oben und unten, 2. Wert Abstand von links und rechts
  • Drei Angaben: 1. Wert Abstand von oben, 2. Wert Abstand für links und rechts, 3. Wert Abstand von unten
  • Vier Angaben: 1. Wert Abstand von oben, 2. Wert Abstand von rechts, 3. Wert Abstand von unten, 4. Wert Abstand von links.

Border-image-slice.png

Zusätzlich kann der Wert fill angegeben werden. Dieser bewirkt, dass das mittlere Teilstück über den Hintergrund des Elements gezeichnet wird. Wenn Sie fill weglassen, wird das mittlere Teilstück verworfen.

Beachten Sie: Firefox verhält sich immer so, als ob fill gesetzt ist, d.h. er zeichnet das mittlere Teilstück über den Hintergrund. Wenn sie möchten, dass der eigentliche Hintergrund sichtbar bleibt, müssen Sie dafür sorgen, dass das mittlere Teilstück des Rahmenbildes transparent ist.

border-image-width (Rahmenbildbreite)

Mit border-image-width können Sie den Bereich festlegen, in dem das Rahmenbild gezeichnet wird. Die Einzelteile des Bildes werden dann entsprechend skaliert. Bezüglich der möglichen Werte enthält die Spezifikation noch Fragen, und border-image-width wird derzeit noch von keinem Browser interpretiert.

border-image-outset (Rahmenbildüberhang)

Mit border-image-outset können Sie festlegen, wie weit das Rahmenbild aus dem eigentlichen Rahmen herausragen soll. Das Element wird dabei nicht vergrößert, so dass Überlappungen mit Nachbarelementen realisiert werden können. Diese Eigenschaft wird allerdings derzeit noch von keinem Browser interpretiert.

border-image-repeat (Rahmenbildwiederholung)

Mit border-image-repeat legen Sie fest, ob und wie die vier Bildteile in den Seitenrändern wiederholt werden. Mögliche Werte sind:

  • repeat, Wiederholung, Bildteile werden nicht verändert, Einzelbilder am Anfang und Ende werden ggf. abgeschnitten
  • space, Wiederholung, Bildteile werden nicht verändert, ggf. zusätzlicher Platz wird zwischen den Einzelbildern verteilt
  • round, Wiederholung, Bildteile werden so in der Größe verändert, dass keines am Ende abgeschnitten wird
  • stretch, keine Wiederholung, sondern Streckung.

border-image (Rahmenbild allgemein)

Die Eigenschaft border-image ist die Zusammenfassung der oben genannten Einzelangaben. Die Werte werden dabei mit Leerzeichen voneinander getrennt.

zeige vollständigen Quelltextzeige vollständigen Quelltext
Beispiel ansehen …
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>border-image</title>
    <style type="text/css">
	
      p { padding:2em; width:20em; border: solid #aaa; border-width:99px 102px;}
    
      .stretch {border-image: url(Border-image.png) 99 102 stretch;}
      .repeat  {border-image: url(Border-image.png) 99 102 repeat;}
      .space   {border-image: url(Border-image.png) 99 102 space;}
      .round   {border-image: url(Border-image.png) 99 102 round;}
    
    </style>
  </head>
  <body>
    <p class="stretch">Textabsatz mit stretch.</p>
    <p class="repeat">Textabsatz mit repeat.</p>
    <p class="space">Textabsatz mit space.</p>
    <p class="round">Textabsatz mit round.</p>
  </body>
</html>
Das Beispiel verwendet dieses Bild:

Border-image.png

Abgeschnitten wird jeweils bei 99 Pixeln ab der Ober- und Unterkante, und bei 102 Pixeln ab der rechten und linken Kante, so dass sich die folgenden neun Teilbereiche ergeben:

Border-image-Teilbereiche.png


Beispiel ansehen …
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>border-image</title>
    <style type="text/css">
	
      p { padding:2em; width:20em; border: solid #aaa; border-width:99px 102px;}
    
      .stretch {-moz-border-image:    url(http://wiki.selfhtml.org/mediawiki/images/c/cb/Border-image.png) 99 102 stretch;
                -webkit-border-image: url(http://wiki.selfhtml.org/mediawiki/images/c/cb/Border-image.png) 99 102 stretch;
                border-image:         url(http://wiki.selfhtml.org/mediawiki/images/c/cb/Border-image.png) 99 102 stretch;}
    
      .repeat  {-moz-border-image:    url(http://wiki.selfhtml.org/mediawiki/images/c/cb/Border-image.png) 99 102 repeat;
                -webkit-border-image: url(http://wiki.selfhtml.org/mediawiki/images/c/cb/Border-image.png) 99 102 repeat;
                border-image:         url(http://wiki.selfhtml.org/mediawiki/images/c/cb/Border-image.png) 99 102 repeat;}
      
      .space   {-moz-border-image:    url(http://wiki.selfhtml.org/mediawiki/images/c/cb/Border-image.png) 99 102 space;
               -webkit-border-image: url(http://wiki.selfhtml.org/mediawiki/images/c/cb/Border-image.png) 99 102 space;
                border-image:         url(http://wiki.selfhtml.org/mediawiki/images/c/cb/Border-image.png) 99 102 space;}
				
      .round   {-moz-border-image:    url(http://wiki.selfhtml.org/mediawiki/images/c/cb/Border-image.png) 99 102 round;
                -webkit-border-image: url(http://wiki.selfhtml.org/mediawiki/images/c/cb/Border-image.png) 99 102 round;
                border-image:         url(http://wiki.selfhtml.org/mediawiki/images/c/cb/Border-image.png) 99 102 round;}
    
    </style>
  </head>
  <body>
    <p class="stretch">Textabsatz mit stretch.</p>
    <p class="repeat">Textabsatz mit repeat.</p>
    <p class="space">Textabsatz mit space.</p>
    <p class="round">Textabsatz mit round.</p>
  </body>
</html>
Das Beispiel verwendet dieses Bild:

Border-image.png

Abgeschnitten wird jeweils bei 99 Pixeln ab der Ober- und Unterkante, und bei 102 Pixeln ab der rechten und linken Kante, so dass sich die folgenden neun Teilbereiche ergeben:

Border-image-Teilbereiche.png


Achtung!

Die Eigenschaft border-radius ist noch nicht in alle aktuellen Browser implementiert, deshalb muss man proprietäre Eigenschaften verwenden.

Für Firefox

  • -moz-border-image

für Safari und Chrome

  • -webkit-border-image.
Hinweis:
Sie sollten bei der Definition solcher noch nicht umfassend verbreiteter Eigenschaften die herstellerspezifischen Angaben immer vor der standardisierten Form machen. Da später gemachte Angaben frühere überschreiben, ist so sichergestellt, dass die standardisierten Angaben von dem Zeitpunkt an, an dem sie unterstützt werden, auch verwendet werden.

border-collapse (zusammenfallende Rahmen)

Mit dieser Eigenschaft können Sie festlegen, ob Einzelrahmen von Tabellenzellen zusammenfallen sollen oder nicht. Eine Beschreibung finden Sie unter Doku:CSS/Eigenschaften/Tabellen#border-collapse.

border-spacing (Rahmenabstand)

Mit dieser Eigenschaft bestimmen Sie den Abstand zwischen Rahmen im sichtbaren Gitternetz einer Tabelle. Eine Beschreibung finden Sie unter Doku:CSS/Eigenschaften/Tabellen#border-spacing.

Siehe auch

Außenlinie (outline)

Weblinks

Übersicht verschiedener Angaben für border-radius

Abgerufen von „http://wiki.selfhtml.org/index.php?title=CSS/Tutorials/Boxmodell/Rahmen&oldid=10245“