Ostatnio edytowany:

border-image-slice

Autor: Virtual Patriot

Opis 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.

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

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
  • 100%
wyjątki initial
  • brak
animowanie
  • nie

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

Opis

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

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(http://webkod.pl/files/css/obrazek-04.png);
        border-image-slice:20 fill;
        border-image-width:20px;
        border-image-repeat:round;
        padding:1em;
        font-size:1.3em;
        background-color:#AFF;
      }
    </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>