Kurs języka HTML i CSS

Poradnik webmastera

  • Zwiększ rozmiar czcionki
  • Domyślny  rozmiar czcionki
  • Zmniejsz rozmiar czcionki
CSS3 - obramowania

CSS3 - border-image-repeat

Email Drukuj PDF

Tematy: border-top-left-radius | border-top-right-radius | border-bottom-left-radius | border-bottom-right-radius | border-radius | box-shadow | border-image-source | border-image-width | border-image-outset | border-image-repeat | border-image-slice | border-image | box-decoration-break

Dane w pigułce
Zastosowanie Określa sposób powtarzania brzegu
Dziedziczenie nie
Wartości repeat, stretch, round
Wartość domyślna brak
Przykład border-image-repeat: repeat
Składnia JavaScript object.style.borderImageRepeat="repeat"

Aby zdefiniować sposób powtarzania, należy wpisać w definicji stylu border-image-repeat: wartość;

Stylu tego w kanonicznej postaci W3C nie obsługuje poprawnie żadna przeglądarka - trzy przeglądarki, Firefox, Chrome i Opera, posługują się zmodyfikowaną wersją i konieczne jest użycie prefiksów -moz-, -webkit- i -o-, np.:

border-image: url(http://www.w3.org/TR/css3-background/border.png) 27 repeat;
-moz-border-image: url(http://www.w3.org/TR/css3-background/border.png) 27 repeat;
-webkit-border-image: url(http://www.w3.org/TR/css3-background/border.png) 27 repeat;
-o-border-image: url(http://www.w3.org/TR/css3-background/border.png) 27 repeat;

Grafika obramowania

Pokażmy działanie wartości stretch. Jak widać, następuje rozciągnięcie brzegów obrazka (tutaj: beżowych rombów). Podana wartość 27 odpowiada rozmiarowi tego fragmentu, wskutek czego rozciągany jest dokładny obraz każdego rombu, na długość odpowiadającego mu brzegu pojemnika, ale tylko do narożnika.

Gallia est omnis divisa in partes tres, quarum unam incolunt Belgae, aliam Aquitani, tertiam qui ipsorum lingua Celtae, nostra Galli appellantur. Hi omnes lingua, institutis, legibus inter se differunt. Gallos ab Aquitanis Garumna flumen, a Belgis Matrona et Sequana dividit. Horum omnium fortissimi sunt Belgae, propterea quod a cultu atque humanitate provinciae longissime absunt, minimeque ad eos mercatores saepe commeant atque ea quae ad effeminandos animos pertinent important, proximique sunt Germanis, qui trans Rhenum incolunt, quibuscum continenter bellum gerunt.

Pokażmy teraz działanie wartości repeat. Jak widzimy, następuje powielenie brzegów obrazka (beżowych rombów). Podana wartość 27 odpowiada rozmiarowi tego fragmentu, wskutek czego powielany jest dokładny obraz każdego rombu. Jeśli rozmiar pojemnika nie pasuje dokładnie do wielokrotności tego fragmentu, na końcach może się pojawić tylko fragment rombu.


Gallia est omnis divisa in partes tres, quarum unam incolunt Belgae, aliam Aquitani, tertiam qui ipsorum lingua Celtae, nostra Galli appellantur. Hi omnes lingua, institutis, legibus inter se differunt. Gallos ab Aquitanis Garumna flumen, a Belgis Matrona et Sequana dividit. Horum omnium fortissimi sunt Belgae, propterea quod a cultu atque humanitate provinciae longissime absunt, minimeque ad eos mercatores saepe commeant atque ea quae ad effeminandos animos pertinent important, proximique sunt Germanis, qui trans Rhenum incolunt, quibuscum continenter bellum gerunt.

Wartość round daje na razie taki sam efekt, jak repeat.

Pomijamy w tym miejscu objaśnienie innych parametrów definicji.

Interpretacja: Firefox, Opera, Chrome.

 

CSS. Tworzenie nowoczesnych stron WWW.

CSS3. Tworzenie nowoczesnych stron WWW
(czerwiec 2012)

HTML5 i CSS3. Standardy przyszłości

HTML5 i CSS3
Standardy przyszłości

CSS3. Szybki start. Wydanie V

CSS3. Szybki start.
Wydanie V