Kontrola styku tła i obramowania

piątek, 12 marzec 2010 08:41 Administrator
Drukuj

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