Kurs języka HTML i CSS

Poradnik webmastera

  • Zwiększ rozmiar czcionki
  • Domyślny  rozmiar czcionki
  • Zmniejsz rozmiar czcionki

Kontrola styku tła i obramowania

Email Drukuj PDF

background-clip

Dostępne wartości:

padding-box | border-box | inherit

Wartość domyślna:

border-box

Przykład:

div {background-clip: border-box;}

Dziedziczenie:

Nie

Obsługa:

Chrome

Korzystając ze stylu background-clip, możemy kontrolować, czy tło (kolor lub obrazek) wchodzi pod ramkę, gdy jest ona ustawiona dla formatowanego elementu.

Przykładowy arkusz stylów może mieć postać:

DIV

{

background-color:#C0FFC0;

width:500px;

height:500px;

border:dotted 10px red;

background-clip:padding-box;

}

Przykład działania arkusza jest widoczny jedynie dla posiadaczy przeglądarki Chrome. Użytkownicy pozostałych przeglądarek wykorzystywanych przeze mnie podczas pracy nad niniejszym kursem (Safari, Opera, Internet Explorer oraz Mozilla Firefox) muszą zadowolić się rysunkiem 15.21.

<<przykład>>

<div class="przyklad">

<h3>Przykład działania  background-clip:padding-box</h3>

<div style="background-color:#C0FFC0;width:100px;height:100px;border:dotted 10px red;background-clip:padding-box;">

&nbsp;

</div>

<h3>Przykład działania background-clip:border-box</h3>

<div style="background-color:#C0FFC0;width:100px;height:100px;border:dotted 10px red;background-clip:border-box;">

&nbsp;

</div>

</div>

<</przykład>>

Rysunek 15.21. Przykład działania stylu background-clip

 

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

Nowości Helionu

Statystyki

Użytkowników : 766
Artykułów : 513
Zakładki : 28
Odsłon : 15226297