Powtarzanie obramowania obrazkowego {border-image-repeat}
W jaki sposób powielić obrazek w postaci obramowania elementu?
CSS 3
selektor { border-image-repeat: powtarzanie }Selektorem może być praktycznie dowolny znacznik, np. p - akapit czy h1 - tytuł [zobacz: Wstawianie stylów].
Natomiast jako "powtarzanie" należy wpisać:
Natomiast jako "powtarzanie" należy wpisać:
- stretch - obrazek zostanie rozciągnięty, tak aby wypełnił całą powierzchnię (domyślnie)
- repeat - obrazek zostanie powielony na całej powierzchni
- round - powielenie z dopasowaniem rozmiarów (jeżeli długość krawędzi obramowania nie jest wielokrotnością wymiaru obrazka, zostanie on rozciągnięty w taki sposób, aby nie był przycięty)
- space - powielenie z dopasowaniem odstępów (jeżeli długość krawędzi obramowania nie jest wielokrotnością wymiaru obrazka, pusta przestrzeń pomiędzy sąsiednimi powtórzeniami obrazka zostanie dobrana w taki sposób, aby obrazek nie był przycięty)
Przykład {border-image-repeat}
border-image-source: url(punkt.gif); border-image-slice: 10; border-image-repeat: stretch; border-width: 10px
Domyślny sposób powtarzania obrazka w obramowaniu.
Domyślny sposób powtarzania obrazka w obramowaniu.
border-image-source: url(punkt.gif); border-image-slice: 10; border-image-repeat: repeat; border-width: 10px
Standardowe powielenie - część grafiki obramowania może być przycięta.
Standardowe powielenie - część grafiki obramowania może być przycięta.
border-image-source: url(punkt.gif); border-image-slice: 10; border-image-repeat: round; border-width: 10px
Powielenie z dopasowaniem rozmiarów - grafika obramowania nie powinna być przycięta, a ewentualnie dopasowana poprzez rozciągnięcie.
Powielenie z dopasowaniem rozmiarów - grafika obramowania nie powinna być przycięta, a ewentualnie dopasowana poprzez rozciągnięcie.
border-image-source: url(punkt.gif); border-image-slice: 10; border-image-repeat: space; border-width: 10px
Powielenie z dopasowaniem odstępów - grafika obramowania nie powinna być przycięta, a ewentualnie zwiększona pusta przestrzeń pomiędzy sąsiednimi obrazkami w obramowaniu.
Powielenie z dopasowaniem odstępów - grafika obramowania nie powinna być przycięta, a ewentualnie zwiększona pusta przestrzeń pomiędzy sąsiednimi obrazkami w obramowaniu.
Przeglądarki
 Chrome |  Firefox |  Edge |  Opera |  Safari | |
|---|---|---|---|---|---|
border-image-repeat: wartość | 15 2011-10-25 | 15 2012-08-28 | 12 2015-07-29 | 15 2013-07-02 | 6 2012-07-25 |
border-image-repeat: repeat | 15 2011-10-25 | ≤72 2020-01-07 | 12 2015-07-29 | 15 2013-07-02 | 6 2012-07-25 |
border-image-repeat: round | 30 2013-10-01 | 15 2012-08-28 | 12 2015-07-29 | 17 2013-10-08 | 9.1 2016-03-21 |
border-image-repeat: space | 56 2017-01-25 | 50 2016-11-15 | 12 2015-07-29 | 43 2017-02-07 | 9.1 2016-03-21 |
border-image-repeat: stretch | 15 2011-10-25 | ≤72 2020-01-07 | 12 2015-07-29 | 15 2013-07-02 | 6 2012-07-25 |