Autor publikacji
Virtual Patriot - Administrator

border-image-slice

Data publikacji
Ostatnio edytowano

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.

Informacje dodatkowe

brak

Dodatkowe techniczne informacje 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

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

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.

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.

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.

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.

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.

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(http://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>