Come aggiungere bordi curvi in ​​CSS

May 4

Il CSS3 arrotondato i bordi presentano vi dà la possibilità di creare facilmente rthe effetto frontiera curvo, e gode di sostegno da parte di Internet Explorer 9, Firefox 4, Safari 5 e altri browser web più importanti. confini curve aiutano a creare un senso di equilibrio nella progettazione di un sito web. I loro angoli arrotondati tagliare la monotonia di linee rette e dare una pagina un look più morbido.

istruzione

1 Trova il selettore CSS per aggiungere i bordi curvi a. Inserire la proprietà "border-radius" ed inserire il suo valore sia in percentuale o unità, come pixel o SME. Più alto è il numero, più arrotondato la curva. Ad esempio, per rendere i bordi di un tag <div> 50 pixel in termini di dimensioni, scrivere:

div
{
border-style: solido; /

Commento: Ciò è necessario per rendere lui confina visibile /.
border-radius: 50px;
}

2 Inserire le proprietà del bordo singolarmente se si desidera assegnare un importo curva diversa ad ogni angolo. Seguire l'ordine in alto a sinistra, in alto a destra, in basso a destra, in basso a sinistra, come illustrato di seguito:

div {border-style: solido;
border-top-left-radius: 1em;
border-top-right-radius: 2em;
border-bottom-right-radius: 3em;
border-bottom-left-radius: 4em;
}

3 Scrivere le proprietà raggio di confine in un'unica dichiarazione, come segue. Utilizzare questo metodo scorciatoia se non si vuole dichiarare la proprietà di ogni angolo singolarmente. Questo esempio fa sì che le prime curve a sinistra e in basso a sinistra per essere angolare, mentre in alto a destra e in basso a destra angoli sono curvi.

div {border-radius: 0em 3em 3em 0em;
}

Consigli e avvertenze

  • Ogni angolo può avere fino a due valori. Ad esempio, la proprietà "border-top-right-radius" può avere un valore di "2em 1em". Il primo valore è il raggio orizzontale, il secondo valore è il raggio verticale. Se si immette un solo valore, lo stesso valore verrà utilizzato per entrambi i raggi.
  • Prefisso "-moz-" (senza virgolette) prima che la proprietà "border-radius" per Firefox 3.6 e versioni precedenti.
  • i bordi curvi non funzionano con le versioni di Internet Explorer di età superiore a IE9.

Articoli Correlati