Autor publikacji
Virtual Patriot - Administrator

border-image-repeat

Data publikacji
Ostatnio edytowano

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

Za pomocą właściwości border-image-repeat możemy określić sposób powtarzania się niektórych części obrazkowego obramowania interesującego nas elementu HTML. Mowa tu o tych częściach obrazkowego obramowania, które odpowiadają za wygląd górnego, prawego, dolnego oraz lewego obramowania elementu HTML, jak również mowa tu o tej części obrazkowego obramowania, która może wypełniać środkowy obszar elementu HTML.

Informacje dodatkowe

brak

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

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

stretch

wyjątki initial

brak

animowanie

tak (animacja schodkowa)

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

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

stretch

Opis

Wartość stretch jest domyślną wartością właściwości border-image-repeat.

Domyślnie niektóre części obrazkowego obramowania rozciągane są wzdłuż rozmiaru elementu HTML.

Przykład

  border-image-repeat:stretch;
obrazkowe obramowanie tego elementu "div" jest rozciągnięte wzdłuż rozmiaru tego elementu "div"

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;
        border-image-width:20px;
        padding:1em;
        font-size:1.3em;
        background-color:#7DCDE8;
      }
    </style>
  </head>

  <body>

    <div>
      obrazkowe obramowanie tego elementu "div" jest rozciągnięte wzdłuż rozmiaru tego elementu "div"
    </div>

  </body>
</html>

repeat

Opis

Za pomocą wartości repeat właściwości border-image-repeat możemy sprawić, że obrazkowe obramowanie interesującego nas elementu HTML będzie powtarzane w stylu repeat. Styl repeat oznacza, że niektóre części obrazkowego obramowania będą powtarzane wzdłuż rozmiaru elementu HTML bez żadnych dodatkowych reguł (np. dotyczących dodatkowego skalowania).

Przykład

  border-image-repeat:repeat;
obrazkowe obramowanie tego elementu "div" jest powtarzane w stylu "repeat", ponieważ do tego elementu "div" została dodana właściwość "border-image-repeat" wraz z wartością "repeat"

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;
        border-image-width:20px;
        border-image-repeat:repeat;
        padding:1em;
        font-size:1.3em;
        background-color:#7DCDE8;
      }
    </style>
  </head>

  <body>

    <div>
      obrazkowe obramowanie tego elementu "div" jest powtarzane w stylu "repeat", ponieważ do tego elementu "div" została dodana właściwość "border-image-repeat" wraz z wartością "repeat"
    </div>

  </body>
</html>

round

Opis

Za pomocą wartości round właściwości border-image-repeat możemy sprawić, że obrazkowe obramowanie interesującego nas elementu HTML będzie powtarzane w stylu round. Styl round oznacza, że niektóre części obrazkowego obramowania będą powtarzane wzdłuż rozmiaru elementu HTML oraz (jeżeli będzie to konieczne) zostaną one przeskalowane w taki sposób, aby wypełnić równomiernie w całości poszczególny rozmiar wspomnianego elementu HTML.

Przykład

  border-image-repeat:round;
obrazkowe obramowanie tego elementu "div" jest powtarzane w stylu "round", ponieważ do tego elementu "div" została dodana właściwość "border-image-repeat" wraz z wartością "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-width:20px;
        border-style:solid;
        border-image-source:url(https://webkod.pl/files/css/obramowanie-04.png);
        border-image-slice:20;
        border-image-width:20px;
        border-image-repeat:round;
        padding:1em;
        font-size:1.3em;
        background-color:#7DCDE8;
      }
    </style>
  </head>

  <body>

    <div>
      obrazkowe obramowanie tego elementu "div" jest powtarzane w stylu "round", ponieważ do tego elementu "div" została dodana właściwość "border-image-repeat" wraz z wartością "round"
    </div>

  </body>
</html>

space

Opis

Za pomocą wartości space właściwości border-image-repeat możemy sprawić, że obrazkowe obramowanie interesującego nas elementu HTML będzie powtarzane w stylu space. Styl space oznacza, że niektóre części obrazkowego obramowania będą powtarzane wzdłuż rozmiaru elementu HTML oraz (jeżeli będzie to konieczne) zostaną one rozmieszczone (bez dodatkowego skalowania) w taki sposób, aby zmieścić się w całości w poszczególnym rozmiarze wspomnianego elementu HTML.

Przykład

  border-image-repeat:space;
obrazkowe obramowanie tego elementu "div" jest powtarzane w stylu "space", ponieważ do tego elementu "div" została dodana właściwość "border-image-repeat" wraz z wartością "space"

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;
        border-image-width:20px;
        border-image-repeat:space;
        padding:1em;
        font-size:1.3em;
        background-color:#7DCDE8;
      }
    </style>
  </head>

  <body>

    <div>
      obrazkowe obramowanie tego elementu "div" jest powtarzane w stylu "space", ponieważ do tego elementu "div" została dodana właściwość "border-image-repeat" wraz z wartością "space"
    </div>

  </body>
</html>

wzorzec wartości

Opis

Za pomocą właściwości border-image-repeat oraz z góry zdefiniowanego wzorca wartości możemy określić sposób powtarzania się niektórych części obrazkowego obramowania interesującego nas elementu HTML.

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

Przykładowe zapisy

repeat

repeat round

round stretch

space stretch

horizontal

Składnik horizontal jest wymaganym składnikiem wzorca wartości właściwości border-image-repeat. Składnik horizontal określa sposób powtarzania się niektórych części obrazkowego obramowania interesującego nas elementu HTML względem rozmiaru szerokości tego elementu HTML.

vertical

Składnik vertical nie jest wymaganym składnikiem wzorca wartości właściwości border-image-repeat. Składnik vertical określa sposób powtarzania się niektórych części obrazkowego obramowania interesującego nas elementu HTML względem rozmiaru wysokości tego elementu HTML.

Przykład

  border-image-repeat:round stretch;
obrazkowe obramowanie tego elementu "div" względem rozmiaru szerokości tego elementu "div" jest powtarzane w stylu "round", natomiast względem rozmiaru wysokości tego elementu "div" jest powtarzane w stylu "stretch", ponieważ do tego elementu "div" została dodana właściwość "border-image-repeat" wraz z następującymi wartościami: "round stretch"

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;
        border-image-width:20px;
        border-image-repeat:round stretch;
        padding:1em;
        font-size:1.3em;
        background-color:#7DCDE8;
      }
    </style>
  </head>

  <body>

    <div>
      obrazkowe obramowanie tego elementu "div" względem rozmiaru szerokości tego elementu "div" jest powtarzane w stylu "round", natomiast względem rozmiaru wysokości tego elementu "div" jest powtarzane w stylu "stretch", ponieważ do tego elementu "div" została dodana właściwość "border-image-repeat" wraz z następującymi wartościami: "round stretch"
    </div>

  </body>
</html>