box-shadow (proprietà CSS) imposta l’ombreggiatura dell’elemento HTML, con relativa espansione e colore, ponendola a destra o sinistra nonché in alto o in basso dell’elemento stesso. Analoga funzione ha la proprietà text-shadow relativamente al testo. E’ possibile, infine, inserire l’ombreggiatura all’interno del box, mediante la dichiarazione inset.
Sintassi
[selettore] {
box-shadow: [-sinistra o +destra] [-alto o +basso] [livello espansione] [livello diffusione] [colore]
}
| valore | descrizione |
|---|---|
| XXX | XXX |
Esempi
<style>
.boxshadow_1 {
box-shadow: 5px 5px 10px 2px yellow;
float:left;
}
.boxshadow_2 {
box-shadow: inset 5px 5px 10px 2px yellow;
}
.boxshadow_3 {
box-shadow: -5px -5px 10px 2px yellow;
float:right;
}
.boxshadow_1, .boxshadow_2, .boxshadow_3 {
border: 1px solid black;
width: 30%;
padding-top: 25%; /*quadrato responsivo: height = width */
display:inline-block;
}
</style>
<div class="boxshadow_1">Test1</div>
<div class="boxshadow_2">Test2</div>
<div class="boxshadow_3">Test3</div>
Test1
Test2
Test3
E’ altresì possibile, infine, stabilire lo stile di bordi multipli, semplicemente separando i valori con una virgola
<style>
.boxshadow_4 {
box-shadow: 5px 5px 10px 2px yellow, -5px -5px 10px 2px orange;
border: 1px solid black;
width: 30%;
padding-top: 25%; /*quadrato responsivo: height = width */
}
</style>
<div class="boxshadow_4">Test</div>
Test
Contenuti correlati
- CSS
- HTML
- JavaScript
- jQuery
- PHP
- SQL
- WORDPRESS
0 Comment