Come fare arrotondato div Utilizzando i CSS

July 30

Come fare arrotondato div Utilizzando i CSS


Prima di browser è diventato compatibile con il "border-radius" proprietà di Cascading Style Sheets (CSS), i progettisti dovevano tagliare gli angoli nei programmi di editing grafico, poi applicarli alle pagine Web utilizzando trucchi di layout complessi. Con "border-radius," si può fare div arrotondati solo con una o due righe di codice e non ci sono immagini. È anche possibile cambiare le forme di angoli arrotondati e applicare un arrotondamento diverso per ogni angolo di un DIV.

istruzione

1 Aprire il file HTML in un editor di codice come jEdit, Notepad ++ o BBEdit. Tipo "<div>" tag nel codice come questo:

<Div> </ div>

Digitare il contenuto tra i "<div>" tag. È possibile inserire qualsiasi contenuto che ti piace, come ad esempio immagini e testo.

2 Aggiungere un attributo ID per la vostra apertura "<div>" tag. Utilizzare l'ID per dare al vostro DIV un nome univoco e significativo. Non è possibile utilizzare un ID più di una volta sulla stessa pagina web senza causare problemi di layout quando si tenta di indirizzare il ID in CSS. Aggiungere l'attributo ID in questo modo:

<Div id = "arrotondata"> Il contenuto ... </ div>

3 Scorrere verso l'alto nel file HTML e cercare "<link>" o "<style>" tag. Aprire un file CSS di riferimento da un tag "<link>" e aggiungere il codice CSS lì. Se si trova solo "<style>" tag, quindi aggiungere il codice CSS tra questi tag. È possibile aggiungere i tag stessi, troppo, tra i "<head>" tag.

4 Digitare un selettore - codice per "selezionare" un elemento HTML - per indirizzare il DIV con il suo nome ID. Aggiungere la proprietà "border-radius" tra le parentesi graffe e impostarlo su un valore di pixel. Il codice è simile al seguente:

arrotondato {border-radius: 10px;}

valori di raggio alti rendono DIV più arrotondata, mentre valori inferiori creano un effetto di arrotondamento più sottile.

5 Aggiungere una lunghezza distanza per modificare la forma della curva come questa:

arrotondato {border-radius: 20px 10px;}

L'esempio precedente dà il confine un raggio angolo di 10 pixel, e imposta la larghezza del angolo di venti pixel.

6 Dare ad ogni angolo il suo stile "border-radius" in questo modo:

arrotondata {

border-top-left-radius: 10px;

border-top-right-radius: 20px;

border-bottom-left-radius: 30px;

border-bottom-right-radius: 40px;

}

Consigli e avvertenze

  • Impostare il "border-radius" su un valore maggiore del valore imbottitura della DIV per fare gli angoli interni arrotondati quando si applica un bordo spesso.
  • A partire da maggio 2011, tutti i browser supportano "border-radius" senza l'uso di prefissi vendor. Non è necessario aggiungere le proprietà come "-webkit-border-radius" per rendere gli angoli arrotondati lavoro.