CSS border-image Właściwość
Przykład
Określ obraz jako ramkę wokół elementu:
#borderimg {
border-image: url(border.png) 30 round;
}
Więcej przykładów „Wypróbuj sam” poniżej.
Definicja i użycie
Właściwość border-image
umożliwia określenie obrazu, który będzie używany jako obramowanie elementu.
Własność border-image jest skróconą własnością dla:
- źródło-obrazu-obramowania
- obramowanie-obrazu-plasterka
- szerokość-obrazu-obramowania
- granica-obraz-początek
- obramowanie-obrazu-powtórz
Pominięte wartości są ustawiane na wartości domyślne.
Domyślna wartość: | brak 100% 1 0 rozciągliwość |
---|---|
Dziedziczny: | nie |
Animowalny: | nie. Przeczytaj o animacji |
Wersja: | CSS3 |
Składnia JavaScript: | obiekt .style.borderImage="url(border.png) 30 rund" |
Obsługa przeglądarki
Liczby w tabeli określają pierwszą wersję przeglądarki, która w pełni obsługuje tę właściwość.
Liczby, po których następuje -webkit-, -moz- lub -o- określają pierwszą wersję, która działała z przedrostkiem.
Property | |||||
---|---|---|---|---|---|
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: zobacz obsługę poszczególnych przeglądarek dla każdej wartości poniżej.
Składnia CSS
border-image: source slice width outset repeat|initial|inherit;
Wartości nieruchomości
Value | Description | Play it |
---|---|---|
border-image-source | The path to the image to be used as a border | |
border-image-slice | How to slice the border image | |
border-image-width | The width of the border image | |
border-image-outset | The amount by which the border image area extends beyond the border box | |
border-image-repeat | Whether the border image should be repeated, rounded or stretched | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
Więcej przykładów
Przykład
Różne wartości plasterków całkowicie zmieniają wygląd obramowania:
#borderimg1 {
border: 10px solid transparent;
padding: 15px;
border-image: url(border.png) 50 round;
}
#borderimg2 {
border: 10px solid transparent;
padding: 15px;
border-image: url(border.png) 20% round;
}
#borderimg3 {
border: 10px solid transparent;
padding: 15px;
border-image: url(border.png) 30% round;
}
Powiązane strony
Samouczek CSS: obrazy obramowania CSS
CSS Reference: border-image-outset property
CSS Reference: border-image-repeat property
Dokumentacja CSS: właściwość border-image-slice
Dokumentacja CSS: właściwość border-image-source
CSS Reference: właściwość border-image-width
Odniesienie HTML DOM: właściwość borderImage