Bordi
Con il css3 possiamo personalizzare i bordi.
La proprietà border-radius possiamo creare dei bordi con angoli arrotondati
- border-top-left-radius – angolo superiore sinistra;
- border-top-right-radius – angolo superiore destro;
- border-bottom-right-radius – angolo inferiore destro;
- border-bottom-left-radius – angolo inferiore sinistro;
Possiamo inserire solo un parametro se il il raggio orizzontale e verticale sono uguali.
Possiamo creare un bordo personalizzato con la proprietà border-image, l’uso non è proprio intuitivo quindi facciamo riferimento a questa immagine
L’elemento A viene usato per i bordi, mentre B per i lati. I valori da inserire sono:
- border-image-source, url dell’immagine;
- border-image-slice, come tagliare l’immagine;
- border-image-width, larghezza dell’immagine;
- border-image-outset, quanto oltre il bordo della casella l’immagine deve estendersi;
- border-image-repeat, pecifica se l’immagine deve essere ripetuta, arrotondata o allungata;
Un’altra proprietà ci permette di applicare un’ombra ad un box, box-shadow ha i seguenti parametri:
- h-shadow – posizione orizzontale;
- v-shadow – posizione verticale;
Valori positivi indicano lo spostamento dell’ombra verso il basso e verso destra mentre valori negativi indicano uno spostamento verso l’alto e verso sinistra.
Altri parametri opzionali sono:
- blur – distanza dal bordo del box;
- spread – dimensioni dell’ombra;
- color – colore dell’ombra;
- inset – indica se l’ìombra è interna (inset) o esterna (outset);