Nwlapcug.com


Come rendere arrotondati Divs utilizzando i CSS



Prima browser è diventato compatibili con la proprietà "border-radius" di Cascading Style Sheets (CSS), designer necessaria per tagliare angoli in programmi di editing grafici, quindi applicarli alle pagine Web utilizzando layout complicati trucchi. Con "border-radius," è possibile rendere arrotondati DIVs con solo una riga o due del codice e senza le immagini. È anche possibile modificare le forme degli angoli arrotondati e applicare un arrotondamento diverso per ogni angolo di un DIV.

Istruzioni

1

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

< div >< / div >

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

2

Aggiungere un attributo ID per il tag di apertura "< div >". Utilizzare l'ID per dare il vostro DIV un nome univoco e significativo. È possibile utilizzare un ID più volte sulla stessa pagina Web senza causare problemi di layout quando si tenta di indirizzare l'ID nei CSS. Aggiungere l'attributo ID come questo:

< div id = "arrotondato" > il contenuto... < / div >

3

Scorrere verso l'alto nel file HTML e cercare "< link >" o "< style >" tag. Aprire un file CSS a cui fa riferimento un tag "< link >" e aggiungere il codice CSS. Se si trova solo il tag "< style >", quindi aggiungere il codice CSS tra i tag. È possibile aggiungere i tag te stesso, troppo, tra i tag "< head >".

4

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

arrotondato {border-radius: 10px;}

Alti valori di raggio rendono DIVs più arrotondato, mentre i valori più bassi creano un effetto di arrotondamento più sottile.

5

Aggiungere una lunghezza del raggio per modificare la forma della curva come questo:

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

Nell'esempio di cui sopra dà il confine un raggio di 10 pixel e imposta la larghezza dell'angolo a 20 pixel.

6

Dare ogni angolo un proprio stile "border-radius" come questo:

arrotondati () {

border-top-left-radius: 10px;

border-top-right-radius: 20px;

border-bottom-left-radius: 30px;

border-bottom-right-radius: 40px;

}

Consigli & Avvertenze

  • Impostare il "border-radius" su un valore maggiore del valore di spaziatura interna del DIV per rendere 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 proprietà come "- webkit - border-radius" per rendere arrotondati gli angoli lavorano.