Gli sviluppatori Web utilizzano CSS (Cascading Style Sheets) come metodo di applicare effetti visivi alle pagine Web. Come espandono le funzionalità di CSS, gli sviluppatori possono scartare più dei loro hack immagine e altre tecniche goffi in cambio di solo codice effetti visivi. Angoli arrotondati, introdotti come parte del CSS livello 3 (CSS3), rappresentano uno di questi progressi. Senza immagine difficile affettamento e imbarazzante di codifica, è possibile applicare angoli arrotondati a qualsiasi elemento HTML, tra cui divs. Quando si aggiunge un bordo al div arrotondati, si vedrà anche il bordo diventa arrotondato.

Istruzioni

1

Aprire un file HTML nel blocco note o un editor di codice e verifica che il codice include tag "< style >":

< style type = "text/css" >

< / stile >

Se non li trovate nel codice, aggiungere questi tag.

2

Aprire un file HTML nel blocco note o un editor di codice e verifica che il codice include tag "< style >":

< style type = "text/css" >

< / stile >

Se non li trovate nel codice, aggiungere questi tag.

3

Vai al tuo tag di "stile < >" e aggiungere una regola di stile per la casella:

casella () {

}

Modificare "casella" con il nome di ID che hai trovato all'interno dei tag "< div >". Sempre prefisso i nomi di ID con simboli di hash in CSS.

4

Aggiungere la proprietà "border-radius" la regola di stile:

casella () {

border-radius: 25px;

}

Questo codice crea un raggio di confine di 25 pixel per ogni angolo del div. È possibile specificare singoli angoli utilizzando le proprietà denominate "border-top-left-radius" e così via.

5

Dare la tua casella di un bordo utilizzando la proprietà di "confine":

casella () {

border-radius: 25px;

confine: 10px tinta porpora;

}

Si tratta di una proprietà di breve mano che accetta tre valori: larghezza, stile e colore. Utilizzare nomi di colori, codici esadecimali o RGBa (rosso, verde, blu, alfa) codici per impostare i colori per i bordi. Impostare la larghezza del bordo su un valore più piccolo del raggio di confine per mantenere gli angoli interni arrotondati.

Consigli & Avvertenze

• Modificare la forma di una curva aggiungendo un secondo valore "border-radius." Il primo valore diventa la lunghezza della curva, mentre la seconda diventa l'altezza: "border-radius: 25px / 50px;"