box-shadow può essere applicata a tutti gli elementi.
box-shadow: 5px 5px 10px 2px #333333;
La sintassi di base prevede la definizione di quattro valori numerici:
Il primo valore (5px) imposta lo spostamento dell’ombra in senso orizzontale. Essendo il valore positivo, l’ombra viene collocata sul lato destro del box. Se si usano valori negativi l’ombra viene collocata sul lato sinistro.
Il secondo valore (5px) imposta lo spostamento in senso verticale. Dal momento che anche in questo caso si è usato un valore positivo, l’ombra viene collocata sul lato inferiore del box. Usando valori negativi l’ombra viene collocata sul lato superiore del box.
Il terzo valore (10px) definisce il livello di sfocatura (blur radius) dell’ombra: più alto è questo valore, più sfocata apparirà l’ombra. Si usi 0 se si desidera un’ombra netta e senza sfocatura. Non sono permessi valori negativi.
Il quarto valore (2px) imposta il livello di diffusione (spread radius) dell’ombra. Più i valori sono alti, più l’ombra tenderà ad espandersi, in tutte le direzioni. Se invece si usano valori negativi, l’ombra tende a contrarsi, fino a scomparire del tutto.
Di questi quattro valori, gli unici obbligatori sono i primi due. I valori della sfocatura e della diffusione, invece, possono essere omessi. Se non specificati, tali valori sono pari per default a 0.
La nostra regola si chiude con l’indicazione del colore dell’ombra (#333333).
<!DOCTYPE html>
<html>
<head>
<title>Bordi - Box-shadow -</title>
<style type=" text/css" >
body {
font: 12px verdana, arial, sans-serif;
margin: 20px;
}
#box1 {
background: rgb(238, 238, 238);
width:200px;
padding: 10px;
box-shadow: 5px 5px 10px 2px #333333;
-webkit-box-shadow: 5px 5px 10px 2px #333333;
-moz-box-shadow: 5px 5px 10px 2px #333333;
}
#box2 {
background: rgb(238, 238, 238);
width:200px;
padding: 10px;
box-shadow: 5px 5px 10px 2px #333333 inset;
-webkit-box-shadow: 5px 5px 10px 2px #333333 inset;
-moz-box-shadow: 5px 5px 10px 2px #333333 inset;
}
</style>
</head>
<body>
<h2>Box 1</h2>
<div id=" box1" >Lorem ipsum dolor sit amet, consectetur adipisicing elit, </div>
<h2>Box 2</h2>
<div id=" box2" >Lorem ipsum dolor sit amet, consectetur adipisicing elit,.</div>
</body>
</html>
