mozilla
Ihre Suchergebnisse

    border-image-slice

    Übersicht

    Die border-image-slice CSS Eigenschaft teilt das Bild, welches von border-image-source spezifiziert wird, in neun Regionen ein: Die vier Ecken, die vier Kanten und die Mitte. Diese werden von 4 Werten festgelegt.

    The nine slices defined by the CSS border-image shorthand or border-image-slice longhand propertiesVier Werte kontrollieren die Position der Schneidelinien, die das Bild einteilen. Werden nicht alle Werte definiert, werden sie von den anderen angegeben abgeleitet, mit der üblichen 4-Werte CSS Syntax.

    Die Mitte des Bildes wird nicht im Rand verwendet, kann allerdings als Hintergrundbild benutzt werden, wenn das Schlüsselwort fill gesetzt wurde. Dies kann an jeder Position der CSS-Eigenschaft geschehen (vor, hinter oder zwischen anderen Werten).

    Die Eigenschaften border-image-repeat, border-image-width, border-image-outset definieren die weitere Verwendung des Bildes.

    Die Kurzschreibweise border-image kann diese Eigenschaft zu ihrem Standartwert zurücksetzen.

    • Initialwert 100%
    • Anwendbar auf Alle Elemente, ausser internal table Elemente when border-collapse ist collapse
    • Vererbt Nein
    • Prozentwerte bezieht sich auf die Grösse des Bildes
    • Medium visuell
    • Berechneter Wert one to four percentage(s) (as specified) oder absolute length(s), plus the keyword fill if specified
    • Animierbar Nein
    • Kanonische Reihenfolge the percentages oder lengths, eventually followed by the keyword fill

    Syntax

    Formale Syntax: [<number> | <percentage>]{1,4} && fill?  
    border-image-slice: slice                  /* Ein-Wert Syntax   */  z.B. border-image-slice: 30%; 
    border-image-slice: horizontal vertical    /* Zwei-Werte Syntax   */  z.B. border-image-slice: 10% 30%; 
    border-image-slice: top vertical bottom    /* Drei-Werte Syntax */  z.B. border-image-slice: 30 30% 45; 
    border-image-slice: top right bottom left  /* Vier-Werte Syntax  */  z.B. border-image-slice: 7 12 14 5; 
    
    border-image-slice: … fill /* Der fill Wert kann zwischen jedem Wert platziert werden. */ z.B. border-image-slice: 10% fill 7 12;
    
    border-image-slice: inherit
    

    Values

    slice
    ist eine <number> oder eine <percentage>, welche den Abstand der vier Schneidelinien vom Rand festlegt. <length> Werte sind nicht erlaubt. Die <number> wird bei Rastergrafiken als Pixel, bei Vektorgrafiken als Koordinaten angesehen. Desweiteren sind <percentage> Werte relativ zu der Höhe ,beziehungsweise der Weite des Bildes. Negative Werte sind nicht erlaubt und größere Werte als die Bildgröße werden zu 100% konvertiert.
    horizontal
    ist eine <number> oder eine <percentage>, welche den Abstand der zwei horizontalen Schneidelinien, die von oben und unten, vom Rand festlegt. <length> Werte sind nicht erlaubt. Die <number> wird bei Rastergrafiken als Pixel, bei Vektorgrafiken als Koordinaten angesehen. Desweiteren sind <percentage> Werte relativ zu der Höhe ,beziehungsweise der Weite des Bildes. Negative Werte sind nicht erlaubt und größere Werte als die Bildgröße werden zu 100% konvertiert.
    vertical
    ist eine <number> oder eine <percentage>, welche den Abstand der zwei vertikalen Schneidelinien, die von rechts und links, vom Rand festlegt. <length> Werte sind nicht erlaubt. Die <number> wird bei Rastergrafiken als Pixel, bei Vektorgrafiken als Koordinaten angesehen. Desweiteren sind <percentage> Werte relativ zu der Höhe ,beziehungsweise der Weite des Bildes. Negative Werte sind nicht erlaubt und größere Werte als die Bildgröße werden zu 100% konvertiert.
    top
    ist eine <number> oder eine <percentage>, welche den Abstand der oberen Schneidelinie vom Rand festlegt. <length> Werte sind nicht erlaubt. Die <number> wird bei Rastergrafiken als Pixel, bei Vektorgrafiken als Koordinaten angesehen. Desweiteren sind <percentage> Werte relativ zu der Höhe ,beziehungsweise der Weite des Bildes. Negative Werte sind nicht erlaubt und größere Werte als die Bildgröße werden zu 100% konvertiert.
    bottom
    ist eine <number> oder eine <percentage>, welche den Abstand der unteren Schneidelinie vom Rand festlegt. <length> Werte sind nicht erlaubt. Die <number> wird bei Rastergrafiken als Pixel, bei Vektorgrafiken als Koordinaten angesehen. Desweiteren sind <percentage> Werte relativ zu der Höhe ,beziehungsweise der Weite des Bildes. Negative Werte sind nicht erlaubt und größere Werte als die Bildgröße werden zu 100% konvertiert.
    right
    ist eine <number> oder eine <percentage>, welche den Abstand der rechten Schneidelinie vom Rand festlegt. <length> Werte sind nicht erlaubt. Die <number> wird bei Rastergrafiken als Pixel, bei Vektorgrafiken als Koordinaten angesehen. Desweiteren sind <percentage> Werte relativ zu der Höhe ,beziehungsweise der Weite des Bildes. Negative Werte sind nicht erlaubt und größere Werte als die Bildgröße werden zu 100% konvertiert.
    left
    ist eine <number> oder eine <percentage>, welche den Abstand der linken Schneidelinie vom Rand festlegt. <length> Werte sind nicht erlaubt. Die <number> wird bei Rastergrafiken als Pixel, bei Vektorgrafiken als Koordinaten angesehen. Desweiteren sind <percentage> Werte relativ zu der Höhe ,beziehungsweise der Weite des Bildes. Negative Werte sind nicht erlaubt und größere Werte als die Bildgröße werden zu 100% konvertiert.
    fill
    ist ein Schlüsselwort, das die mittlere Region des Bildes über dem Hintergrundbild abbildet. Seine Größe wird dabei jeweils an die der oberen und linken Bildregionen angepasst.
    inherit
    ist ein Schlüsselwort, welches bewirkt, dass alle vier Werte von den berechneten Werten des Elternelements übernommen (vererbt) werden.

    Beispiele

    Spezifikation

    Specification Status Comment
    CSS Backgrounds and Borders Module Level 3
    Die Definition von 'border-image-slice' in dieser Spezifikation.
    Anwärter Empfehlung Initial specification

    Browser compatibility

    Merkmal Chrome Firefox (Gecko) Internet Explorer Opera Safari
    Grundlegende Unterstützung 15.0 15.0 (15.0) 11 15 6
    Merkmal Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
    Grundlegende Unterstützung ? 15.0 (15.0) Nicht unterstützt ? ?

    Siehe auch

    Schlagwörter des Dokuments und Mitwirkende

    Contributors to this page: tilman
    Zuletzt aktualisiert von: tilman,