Kurs języka HTML i CSS

Poradnik webmastera

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

CSS3 - border-image

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 zbiorczo obramowanie pojemnika
Dziedziczenie nie
Wartości adres zakres powtarzanie
Wartość domyślna brak
Przykład border-image: url{obrazek.png) 20 repeat
Składnia JavaScript object.style.borderImage="url{obrazek.png) 20 repeat"

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

Polecenie definiuje zbiorczo obramowanie - podajemy w nim adres obrazka, zakres obrazka wchodzący do obramowania oraz sposób powtarzania. Dodatkowo powinniśmy jeszcze zdefiniować szerokość obramowania, podając definicję border-width.

Musimy jednak pamiętać, że specyfikacja nie jest jeszcze w pełni wdrożona w przeglądarkach i zapewne z czasem będziemy stosować pełniejszą i bardziej poprawną formę polecenia.

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


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.

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