Ostatnio edytowany:

border-image-repeat

Autor: Virtual Patriot

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.

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

nie (animacja nieciągła)

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(http://webkod.pl/files/css/obramowanie-04.png);
        border-image-slice:20;
        border-image-width:20px;
        padding:1em;
        font-size:1.3em;
        background-color:#CBFFFF;
      }
    </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ł (na przykład 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(http://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:#CBFFFF;
      }
    </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(http://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:#CBFFFF;
      }
    </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(http://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:#CBFFFF;
      }
    </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.

Dostępne wartości

wartości właściwości border-image-repeat (wyłącznie wartość stretch, repeat, round lub wartość space)

Wartość domyślna

stretch

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.

Dostępne wartości

wartości właściwości border-image-repeat (wyłącznie wartość stretch, repeat, round lub wartość space)

Wartość domyślna

wartość składnika horizontal

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(http://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:#CBFFFF;
      }
    </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>