Autor publikacji
Virtual Patriot - Administrator

border-image-slice

Data publikacji
Ostatnio edytowano

Przeznaczenie właściwości border-image-slice

Za pomocą właściwości border-image-slice możemy określić 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.

Informacje dodatkowe

brak

Informacje techniczne o właściwości border-image-slice

przeznaczenie

element HTML każdego typu posiadający właściwość border-width wraz z wartością różną od wartości 0 oraz właściwość border-style wraz z wartością różną od wartości none, lecz nie elementy HTML pierwotnie budujące tabelę HTML, gdy element HTML typu table lub inline-table posiada właściwość border-collapse wraz z wartością collapse

pozycja

dowolna

dziedziczenie

nie

wartość initial

100%

wyjątki initial

brak

animowanie

tak (animacja schodkowa)

Interpretacja właściwości border-image-slice

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-slice

wzorzec wartości

Wyjaśnienie

Za pomocą właściwości border-image-slice oraz z góry zdefiniowanego wzorca wartości możemy określić 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.

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

Ważne

pierwsze cztery wartości właściwości border-image-slice możemy podawać według zasady formuły czterech wartości, dlatego tak naprawdę wymaganym składnikiem wzorca wartości właściwości border-image-slice jest tylko jeden składnik

gdy obrazek, który chcemy, aby stanowił obrazkowe obramowanie elementu HTML jest grafiką rastrową, wtedy wartości liczbowe występujące w naszym zapisie traktowane są przez przeglądarkę internetową jako wartości wyrażone w pikselach, natomiast gdy obrazek, który chcemy, aby stanowił obrazkowe obramowanie elementu HTML jest grafiką wektorową, wtedy wartości liczbowe występujące w naszym zapisie traktowane są przez przeglądarkę internetową jako współrzędne wektora

Przykładowe zapisy

5

5 10

5 10 15

5 10 15 20

20 fill

15 30 fill

top

Składnik top jest wymaganym składnikiem wzorca wartości właściwości border-image-slice. Składnik top określa rozmiar przesunięcia prowadnicy do wewnątrz względem górnej krawędzi obrazka, który chcemy, aby stanowił obrazkowe obramowanie interesującego nas elementu HTML.

Dostępne wartości

dowolna nieujemna liczba lub procenty

Wartości procentowe

wartości procentowe liczone są względem aktualnego rozmiaru wysokości obrazka, który chcemy, aby stanowił obrazkowe obramowanie elementu HTML

Składnik right jest wymaganym składnikiem wzorca wartości właściwości border-image-slice. Składnik right określa rozmiar przesunięcia prowadnicy do wewnątrz względem prawej krawędzi obrazka, który chcemy, aby stanowił obrazkowe obramowanie interesującego nas elementu HTML.

Dostępne wartości

dowolna nieujemna liczba lub procenty

Wartości procentowe

wartości procentowe liczone są względem aktualnego rozmiaru szerokości obrazka, który chcemy, aby stanowił obrazkowe obramowanie elementu HTML

bottom

Składnik bottom jest wymaganym składnikiem wzorca wartości właściwości border-image-slice. Składnik bottom określa rozmiar przesunięcia prowadnicy do wewnątrz względem dolnej krawędzi obrazka, który chcemy, aby stanowił obrazkowe obramowanie interesującego nas elementu HTML.

Dostępne wartości

dowolna nieujemna liczba lub procenty

Wartości procentowe

wartości procentowe liczone są względem aktualnego rozmiaru wysokości obrazka, który chcemy, aby stanowił obrazkowe obramowanie elementu HTML

left

Składnik left jest wymaganym składnikiem wzorca wartości właściwości border-image-slice. Składnik left określa rozmiar przesunięcia prowadnicy do wewnątrz względem lewej krawędzi obrazka, który chcemy, aby stanowił obrazkowe obramowanie interesującego nas elementu HTML.

Dostępne wartości

dowolna nieujemna liczba lub procenty

Wartości procentowe

wartości procentowe liczone są względem aktualnego rozmiaru szerokości obrazka, który chcemy, aby stanowił obrazkowe obramowanie elementu HTML

fill

Składnik fill nie jest wymaganym składnikiem wzorca wartości właściwości border-image-slice. Składnik fill określa czy środkowy obszar interesującego nas elementu HTML powinien zostać wypełniony środkową częścią obrazka, który chcemy, aby stanowił obrazkowe obramowanie tego elementu HTML.

Dostępne wartości

słowo kluczowe fill

Sposób podawania

należy podać słowo kluczowe fill, jeżeli chcemy, aby środkowy obszar elementu HTML został wypełniony środkową częścią obrazka, który chcemy, aby stanowił obrazkowe obramowanie tego elementu HTML

Wartość domyślna

brak

border-image-slice:15 30 45 60 fill;

schemat cięcia obrazka w celu utworzenia obramowania obrazkowego

Przykład

  border-image-slice:20 fill;
obrazek, który stanowi obrazkowe obramowanie tego elementu "div" został pokrojony na 9 różnych plastrów, ponieważ do tego elementu "div" została dodana właściwość "border-image-slice" wraz z następującymi wartościami: "20 fill"

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-width:20px;
        border-style:solid;
        border-image-source:url(https://webkod.pl/files/css/obramowanie-04.png);
        border-image-slice:20 fill;
        border-image-width:20px;
        border-image-repeat:round;
        padding:1em;
        font-size:1.3em;
        background-color:#7DCDE8;
      }
    </style>
  </head>

  <body>

    <div>
      obrazek, który stanowi obrazkowe obramowanie tego elementu "div" został pokrojony na 9 różnych plastrów, ponieważ do tego elementu "div" została dodana właściwość "border-image-slice" wraz z następującymi wartościami: "20 fill"
    </div>

  </body>
</html>