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-radiusangolo superiore destro;
  • border-bottom-right-radiusangolo inferiore destro;
  • border-bottom-left-radiusangolo 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);
Please follow and like us:

Lascia un commento