Właściwość CSS border-image-outset

Definicja stylu, przeznaczenie i użycie border-image-outset

Właściwość border-image-outset określa, o ile obszar obramowania obrazu powinien wykraczać poza ramkę.

Wskazówka: spójrz także na właściwość border-image (skróconą właściwość do ustawiania wszystkich właściwości border-image- *).

Wartości właściwości border-image-outset

Wartość	Opis
length	Jednostka długości w px \| mm \| cm \| in \| pt \| pc \| em \| ex określająca, jak daleko od krawędzi pojawi się obraz obramowania. Wartość domyślna to 0.
number	Reprezentuje wielokrotność odpowiedniej szerokości obramowania.
initial	Ustawia tę właściwość na jej wartość domyślną.
inherit	Dziedziczy tę właściwość z elementu nadrzędnego.

Składnia CSS border-image-outset

border-image-outset: length | number | initial | inherit;

Wsparcie przeglądarek dla właściwości border-image-outset

Liczba w tabeli określa pierwszą wersję przeglądarki w pełni obsługującą tę właściwość.

Właściwość
border-image-outset	15.0	11.0	15.0	6.0	15.0

Przykładowe zastosowania z właściwością border-image-outset

Kliknij wartości właściwości poniżej, aby zobaczyć wynik.

Rezultat:

Uwaga: Internet Explorer 10 i wcześniejsze wersje nie obsługują właściwości border-image-outset.

Kod CSS:

#myDIV {
  border: 15px solid transparent;
  padding: 15px;   
  border-image: url(/images/kurs-style-css/border.png);
  border-image-slice: 30;
  border-image-repeat: round;
  border-image-outset: 0;
}

Przykłady właściwości border-image-outset

Przykład 1. Umieszcza obraz obramowania 15 pikseli poza krawędziami obramowania elementu: #borderimg { border-image-source: url(border.png); border-image-outset: 15px; }