Atrybut border-image CSS

Definicja i zastosowanie

Atrybut border-image to skrócona właściwość, która ustawia następujące właściwości:

Jeśli wartość jest pominięta, zostanie ustawiona domyślna wartość.

Wskazówka:Użyj atrybutów border-image-* do stworzenia pięknych, skalowalnych przycisków!

Zobacz również:

CSS3 Tutorial:Krawędzie CSS3

Przykład

Określ obraz jako obramowanie div elementu:

div
{
-webkit-border-image:url(border.png) 30 30 round; /* Safari 5 */
-o-border-image:url(border.png) 30 30 round; /* Opera */
border-image:url(border.png) 30 30 round;
}

Spróbuj sam

Więcej przykładów na dole strony.

CSS Syntax

border-image: źródło cut szerokość outset repeat|initial|inherit;

Wartość atrybutu

Wartość Opis Test
border-image-source Ścieżka do obrazu używanego w krawędzi.
border-image-slice Wewnętrzny przesuniecie obrazu krawędzi.
border-image-width Szerokość obrazu krawędzi.
border-image-outset Ilość, o którą obraz krawędzi wykracza poza krawędź.
border-image-repeat Czy obraz krawędzi powinien być powtarzany (powtarzany), wypełniony (zaokrąglony) czy rozciągnięty (rozciągnięty)? Test

Techniczne szczegóły

Domyślna wartość: brak 100% 1 0 rozciągnięcie
Inheredność: nie
Wersja: CSS3
JavaScript Syntax: object.style.borderImage="url(border.png) 30 30 round"

Więcej przykładów

Przycisk border-image
Ten przykład pokazuje, jak stworzyć przycisk za pomocą atrybutu border-image.

Obsługa przeglądarek

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

Chrome IE / Edge Firefox Safari Opera
16.0
4.0 -webkit-		 11.0 15.0
3.5 -moz-		 6.0
3.1 -webkit-		 15.0
11.0 -o-