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

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

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/obrazek-04.png);
        border-image-slice:20;
        border-image-width:20px;
        padding:1em;
        font-size:1.3em;
        background-color:#AFF;
      }
    </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

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

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

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/obrazek-04.png);
        border-image-slice:20;
        border-image-width:20px;
        border-image-repeat:space;
        padding:1em;
        font-size:1.3em;
        background-color:#AFF;
      }
    </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 (bez wzorca wartości oraz wartości globalnych)

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 (bez wzorca wartości oraz wartości globalnych)

Wartość domyślna

wartość składnika horizontal

Przykład

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