|
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;">
</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;">
</div>
</div>
<</przykład>>
|
|
Rysunek 15.21. Przykład działania stylu background-clip |
