Przejdź do treści

Obramowanie

Powtarzanie obramowania obrazkowego

(CSS 3 - interpretuje Opera 15, Chrome)

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ć:
  • 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-source: url(punkt.gif); border-image-slice: 10; border-image-repeat: stretch; border-width: 10px
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.

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.

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.

Komentarze

Zobacz więcej komentarzy