Ostatnio edytowany:

border-image

Autor: Virtual Patriot

Opis właściwości border-image

Za pomocą właściwości border-image możemy określić kilka różnych cech obrazkowego obramowania interesującego nas elementu HTML.

Dodatkowe techniczne informacje o właściwości border-image

przeznaczenie
  • element HTML każdego typu, lecz nie elementy HTML pierwotnie budujące tabelę HTML, gdy element HTML pierwotnie budujący tabelę HTML posiada właściwość border-collapse wraz z wartością collapse
dziedziczenie
  • nie
wartość initial
  • none 100% /1 /0 stretch
wyjątki initial
  • brak
animowanie
  • nie

Interpretacja właściwości border-image

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

tak, lecz od wersji 11

Edge

tak

Zobacz więcej informacji o interpretacji właściwości .

Opis wartości właściwości border-image

grupa wartości

Opis

Za pomocą właściwości border-image oraz z góry zdefiniowanej grupy wartości możemy określić kilka różnych cech obrazkowego obramowania interesującego nas elementu HTML.

/* OBIE REGUŁY CSS SĄ SOBIE RÓWNOZNACZNE */

/* REGUŁA - 1 */
div {
  border-image:url(obrazek-01.png) 20 /20px /5px round stretch;
}

/* REGUŁA - 2 */
div {
  border-image-source:url(obrazek-01.png);
  border-image-slice:20;
  border-image-width:20px;
  border-image-outset:5px;
  border-image-repeat:round stretch;
}

Składniki grupy wartości właściwości border-image

Ważne

pierwsze napotkane w naszym zapisie wartości poprzedzone znakiem / zawsze będą odpowiadały za wartość składnika width

podana przez nas grupa wartości właściwości border-image nie może zawierać wartości globalnych

Przykładowe zapisy

url(obrazek.png) 20 /20px

url(obrazek.png) 5 10 15 20 /5px 10px 15px 20px

url(obrazek.png) 10 20 /20px /5px

url(obrazek.png) 20 /20px 10px /5px 10px round

url(obrazek.png) 5 10 15 20 /5px 10px 15px 20px /12px 14px 16px 18px round stretch

source

Składnik source nie jest wymaganym składnikiem grupy wartości właściwości border-image. Składnik source określa wartość właściwości border-image-source, czyli to, na podstawie którego obrazka powinno zostać utworzone obrazkowe obramowanie dla interesującego nas elementu HTML.

Wartość domyślna

none

slice

Składnik slice nie jest wymaganym składnikiem grupy wartości właściwości border-image. Składnik slice określa wartość właściwości border-image-slice, czyli to w jaki sposób obrazek, który chcemy, aby stanowił obrazkowe obramowanie interesującego nas elementu HTML powinien zostać pokrojony na plastry przez jeden z mechanizmów przeglądarki internetowej.

Wartość domyślna

100%

/width

Składnik width nie jest wymaganym składnikiem grupy wartości właściwości border-image. Składnik width określa wartość właściwości border-image-width, czyli rozmiar szerokości obrazkowego obramowania interesującego nas elementu HTML.

Sposób podawania

przed wartością składnika width należy umieścić znak /

Wartość domyślna

1

/outset

Składnik outset nie jest wymaganym składnikiem grupy wartości właściwości border-image. Składnik outset określa wartość właściwości border-image-outset, czyli rozmiar odległości obrazkowego obramowania interesującego nas elementu HTML od krawędzi tego elementu HTML.

Sposób podawania

przed wartością składnika outset należy umieścić znak /

Wartość domyślna

0

repeat

Składnik repeat nie jest wymaganym składnikiem grupy wartości właściwości border-image. Składnik repeat określa wartość właściwości border-image-repeat, czyli sposób powtarzania się niektórych części obrazkowego obramowania interesującego nas elementu HTML.

Wartość domyślna

stretch

Przykład

do tego elementu "div" zostało dodane obrazkowe obramowanie (utworzone na podstawie obrazka znajdującego się pod adresem "http://webkod.pl/files/css/obrazek-04.png", pokrojonego na 9 różnych plastrów na podstawie wartości "20", ponadto wspomniane obrazkowe obramowanie tego elementu "div" posiada rozmiar szerokości równy 20 pikseli, znajduje się w odległości równej 5 pikseli od każdej krawędzi tego elementu "div" oraz jest powtarzane w stylu "round"), ponieważ do tego elementu "div" została dodana właściwość "border-image" wraz z następującą grupą wartości: "url(http://webkod.pl/files/css/obrazek-04.png) 20 /20px /5px round"

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      div {
        border:20px solid;
        border-image:url(http://webkod.pl/files/css/obrazek-04.png) 20 /20px /5px round;
        padding:1em;
        font-size:1.3em;
        background-color:#AFF;
      }
    </style>
  </head>

  <body>

    <div>
      do tego elementu "div" zostało dodane obrazkowe obramowanie (utworzone na podstawie obrazka znajdującego się pod adresem "http://webkod.pl/files/css/obrazek-04.png", pokrojonego na 9 różnych plastrów na podstawie wartości "20", ponadto wspomniane obrazkowe obramowanie tego elementu "div" posiada rozmiar szerokości równy 20 pikseli, znajduje się w odległości równej 5 pikseli od każdej krawędzi tego elementu "div" oraz jest powtarzane w stylu "round"), ponieważ do tego elementu "div" została dodana właściwość "border-image" wraz z następującą grupą wartości: "url(http://webkod.pl/files/css/obrazek-04.png) 20 /20px /5px round"
    </div>

  </body>
</html>