mozilla
Ihre Suchergebnisse

    border-image

    Dieser Artikel benötigt eine redaktionelle Überprüfung.

    Übersicht

    Die border-image CSS Eigenschaft ermöglicht das Zeichnen eines Bildes an den Rändern eines Elements. Dies vereinfacht das Zeichnen von komplex wirkenden Widgets deutlich und macht den Gebrauch von neun Kästen um das Element für einige Fälle überflüssig.

    border-image wird anstatt der Randstile benutzt, die durch die border-style Eigenschaft definiert werden. Es ist wichtig, anzumerken, dass, wenn der berechnete Wert von border-image-source, welcher entweder durch border-image-source oder die Kurzschreibweise border-image gesetzt werden kann, none ist, oder falls das Bild nicht angezeigt werden kann, die Randstile verwendet werden.

    • Initialwert Die Verkettung der Initialwerte der Landform Eigenschaften:
      • border-image-source: none
      • border-image-slice: 100%
      • border-image-width: 1
      • border-image-outset: 0s
      • border-image-repeat: stretch
    • Anwendbar auf wie die jeweiligen Kurzschreibweisen:
      • border-image-outset: Alle Elemente, ausser internal table Elemente when border-collapse ist collapse
      • border-image-repeat: Alle Elemente, ausser internal table Elemente when border-collapse ist collapse
      • border-image-slice: Alle Elemente, ausser internal table Elemente when border-collapse ist collapse
      • border-image-source: Alle Elemente, ausser internal table Elemente when border-collapse ist collapse
      • border-image-width: Alle Elemente, ausser table Elemente when border-collapse ist collapse
      . Auch anwendbar auf ::first-letter.
    • Vererbt Nein
    • Prozentwerte The values of its longhand properties the percentage value belongs to:
      • border-image-slice: refer to the size of the border image
      • border-image-width: refer to the width or height of the border image area
    • Medium visuell
    • Berechneter Wert wie die einzelnen Werte der Kurzschreibweise:
      • border-image-outset: all lengths made absolute, otherwise as specified
      • border-image-repeat: siehe Spezifikation
      • border-image-slice: one to four percentage(s) (as specified) oder absolute length(s), plus the keyword fill if specified
      • border-image-source: none oder the image with its URI made absolute
      • border-image-width: all lengths made absolute, otherwise as specified
    • Animierbar Nein
    • Kanonische Reihenfolge die einzige nicht missverständliche Reihenfolge definiert durch die formale Grammatik

    Syntax

    Formale Syntax: <'border-image-source'> || <'border-image-slice'> [ / <'border-image-width'> | / <'border-image-width'>? / <'border-image-outset'> ]? || <'border-image-repeat'>

    Werte

    Siehe die entsprechenden Eigenschaften der verschiedenen Werte.

    Beispiele

    Bild wiederholt (repeat)

    Das bild wird aufgeteilt und einfach gekachelt, um den Randbereich zu füllen.

    .beispiel { 
      border: 30px solid transparent;
      -moz-border-image:url("/files/4127/border.png") 30 30 repeat; /* Old firefox */
      -webkit-border-image:url("/files/4127/border.png") 30 30 repeat; /* Safari */
      -o-border-image:url("/files/4127/border.png") 30 30 repeat; /* Opera */
      border-image:url("/files/4127/border.png") 30 30 repeat;
    }
    

    Ergibt:
    Beispiel für border-image: repeat

    Bild wiederholt (round)

    Die Option round ist eine Variante der repeat Option, die die Kacheln so verteilt, dass die Enden sauber verbunden sind.

    .beispiel { 
      border: 30px solid transparent;
      -moz-border-image:url("/files/4127/border.png") 30 30 round; /* Old firefox */
      -webkit-border-image:url("/files/4127/border.png") 30 30 round; /* Safari */
      -o-border-image:url("/files/4127/border.png") 30 30 round; /* Opera */
      border-image:url("/files/4127/border.png") 30 30 round;
    }

    Ergibt:
    Beispiel für border-image: round

    Bild gestreckt

    Die stretch Option streckt die Bilder, um den Randbereich zu füllen.

    .beispiel { 
      border: 30px solid transparent;
      -moz-border-image:url("/files/4127/border.png") 30 30 stretch; /* Old firefox */
      -webkit-border-image:url("/files/4127/border.png") 30 30 stretch; /* Safari */
      -o-border-image:url("/files/4127/border.png") 30 30 stretch; /* Opera */
      border-image:url("/files/4127/border.png") 30 30 stretch;
    }

    Ergibt:
    Beispiel für border-image: stretch

    Spezifikation

    Spezifikation Status Kommentar
    CSS Backgrounds and Borders Module Level 3
    Die Definition von 'border-image' in dieser Spezifikation.
    Anwärter Empfehlung  

    Browser Kompatibilität

    Merkmal Firefox (Gecko) Chrome Internet Explorer Opera Safari
    Grundlegende Unterstützung

    3.5 (1.9.1)-moz [1]

    Without prefix since 15 (15)

    7.0-webkit

    Without prefix since 16.0

    11

    10.5 / 11.0-o [2]

    Without prefix since 15.0

    3.0-webkit

    Without prefix since 6.0

    optionales <border-image-slice> 15 (15) ? ? ? ?
    fill Schlüsselwort 15 (15) Yes ? Nicht unterstützt Yes (6)
    Merkmal iOS Safari Opera Mini Opera Mobile Android Browser
    Grundlegende Unterstützung

    3.2-webkit

    Without prefix since 15.0 (15)

    Nicht unterstützt 11.0-o 2.1-webkit
    optionales <border-image-slice> 15.0 (15) Nicht unterstützt ? ?
    fill Schlüsselwort 15.0 (15) Nicht unterstützt Nicht unterstützt Yes(18)
    • [1] Eine frühere Version dieser Spezifikation wurde in Gecko Versionen vor 15 mit Präfix implementiert.
    • [2] In Opera wurde die Eigenschaft mit Präfix nach der ohne Präfix hinzugefügt.

    Siehe auch

    Schlagwörter des Dokuments und Mitwirkende

    Mitwirkende an dieser Seite: Sebastianz, tyrann0us
    Zuletzt aktualisiert von: tyrann0us,