CSS3 border-image Property

Przykład

Określ obraz jako obramowania wokół elementu:

#borderimg {
    -webkit-border-image: url(border.png) 30 round; /* Safari 3.1-5 */
    -o-border-image: url(border.png) 30 round; /* Opera 11-12.1 */
    border-image: url(border.png) 30 round;
}

Spróbuj sam "

Więcej "Try it Yourself" przykłady poniżej.

Definicja i Wykorzystanie

Własność border-image pozwala określić obraz, który ma być używany zamiast normalnego ramką elementu.

Własność border-image jest skróconą własnością ustalania border-image-source , border-image-slice , border-image-width , border-image-początku i border-image-repeat właściwości.

Pominięte wartości są ustawione na wartości domyślne.

Domyślna wartość:	none 100% 1 0 stretch
Dziedziczny:	no
Animatable:	no. Read about animatable
Wersja:	CSS3
Składnia JavaScript:	object .style.borderImage="url(border.png) 30 round" Try it

Pomoc Browser

Liczby w tabeli określ pierwszą wersję przeglądarki, która w pełni obsługuje właściwość.

Liczby następnie -webkit-, -moz- lub -o- określić pierwszą wersję, która pracowała z prefiksem.

Nieruchomość
border-image	16,0 4,0 -webkit-	11,0	15,0 3,5 -moz-	6,0 3,1 -webkit-	15,0 11,0 -o-

Uwaga: Patrz indywidualne wsparcie przeglądarki dla każdej wartości poniżej.

Składnia CSS

border-image:source slice width outset repeat|initial|inherit;

wartości nieruchomości

Wartość	Opis	Graj
border-image-source	Ścieżka obrazowi, który ma być stosowany jako obramowanie
border-image-slice	Jak pokroić obraz granicznej	Graj "
border-image-width	Szerokość obrazu granicznego
border-image-outset	Kwota, o której obszar graniczny obrazu wykracza poza pole granicznego
border-image-repeat	Czy obraz granicy powinien być powtarzany, zaokrąglone lub rozciągnięty	Graj "
initial	Ustawia tę właściwość na wartość domyślną. Przeczytaj o początkowej
inherit	Dziedziczy nieruchomość od swojego rodzica. Przeczytaj o dziedziczą

Więcej przykładów

Przykład

Różne wartości slice całkowicie zmienia wygląd obramowania:

#borderimg1 {
    border: 10px solid transparent;
    padding: 15px;
    -webkit-border-image: url(border.png) 50 round; /* Safari 3.1-5 */
    -o-border-image: url(border.png) 50 round; /* Opera 11-12.1 */
    border-image: url(border.png) 50 round;
}

#borderimg2 {
    border: 10px solid transparent;
    padding: 15px;
    -webkit-border-image: url(border.png) 20% round; /* Safari 3.1-5 */
    -o-border-image: url(border.png) 20% round; /* Opera 11-12.1 */
    border-image: url(border.png) 20% round;
}

#borderimg3 {
    border: 10px solid transparent;
    padding: 15px;
    -webkit-border-image: url(border.png) 30% round; /* Safari 3.1-5 */
    -o-border-image: url(border.png) 30% round; /* Opera 11-12.1 */
    border-image: url(border.png) 30% round;
}

Spróbuj sam "