Autor publikacji: Virtual Patriot - Administrator

border-image-repeat

Data publikacji: Wrzesień 01 2013
Ostatnio edytowano: Wrzesień 07 2020

Zobacz również: w3.org - border-image-repeat property (LV3)

Przeznaczenie 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

Informacje techniczne 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`

: tak
: tak
: tak
: tak
: tak, lecz od wersji 11
: tak

Zobacz więcej informacji o interpretacji właściwości border-image-repeat.

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

stretch

Wyjaśnienie

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

Wyjaśnienie

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

Wyjaśnienie

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

Wyjaśnienie

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

Wyjaśnienie

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`

            horizontal vertical

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>