HTML and CSS Reference
In-Depth Information
{
width: 300px;
height: 120px;
border: 20px;
border-image: url(border.png) 20 round round;
}
Il risultato finale è mostrato nella figura 6.6 : al centro è evidenziata l'immagine usata come
sorgente ( border.png ), studiata appositamente per mettere in evidenza come il foglio di
stile userà le singole porzioni (in questo caso creando quadrati di 20px per ogni lato) per il
riempimento dei bordi e degli angoli.
Figura 6.6 - Il bordo viene creato usando un'immagine.
A sinistra della figura 6.6 possiamo vedere come si presenta il div con classe “ demo1 ”,
dove la porzione di immagine usata per i bordi orizzontali (superiore e inferiore) viene al-
lungata ( stretch ). A destra, invece, troviamo la rappresentazione del div con classe
demo2 ” che replica l'immagine per il riempimento di tutti i bordi ( round ).
nota
Per maggiori informazioni sulla gestione di bordi e sfondi con CSS, è possibile
consultare la pagina all'indirizzo http://aspit.co/a1e .
Possiamo infine aggiungere un ulteriore tocco di stile, applicando un'ombreggiatura al con-
tenitore, in modo del tutto analogo a quanto visto per il testo. In questo caso, anziché
text-shadow , dobbiamo usare la proprietà box-shadow , che prevede i seguenti valo-
ri:
Scostamento orizzontale dell'ombreggiatura (horizontal offset, ovvero sull'asse X);
con valori positivi l'ombra viene disegnata alla destra dell'elemento mentre con va-
lori negativi alla sua sinistra;
Search WWH ::




Custom Search