Come fare Div arrotondato e delimitato caselle in codice CSS

June 12

Gli sviluppatori Web utilizzano i CSS (Cascading Style Sheets) come metodo di applicare effetti visivi alle pagine Web. Come le funzionalità di CSS si espandono, gli sviluppatori possono eliminare più dei loro hack di immagini e altre tecniche maldestri in cambio per gli effetti visivi di solo codice. Angoli arrotondati, introdotto come parte della CSS di livello 3 (CSS3), rappresentano uno di questi progressi. Senza difficile affettare immagine e codifica scomodo, è possibile applicare angoli rotondi a qualsiasi elemento HTML, compresi div. Quando si aggiunge un bordo al div arrotondata, si vedrà anche il confine diventa arrotondato.

istruzione

1 Aprire un file HTML in Blocco note o un editor di codice e verificare che il codice include "<style>" tag:

<Style type = "text / css">

</ Style>

Aggiungere questi tag se non li trovate nel codice.

2 Aprire un file HTML in Blocco note o un editor di codice e verificare che il codice include "<style>" tag:

<Style type = "text / css">

</ Style>

Aggiungere questi tag se non li trovate nel codice.

3 Vai nella pagina "<style>" tag e aggiungere una regola di stile per la casella:

scatola {

}

Change "scatola" al nome ID che si trova all'interno del "<div>" tag. prefisso sempre i nomi di identificazione con i simboli di hash in CSS.

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

scatola {

border-radius: 25px;

}

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

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

scatola {

border-radius: 25px;

border: 10px solido viola;

}

Questa è una struttura di breve mano che prende tre valori: larghezza, stile e colore. Utilizzare i nomi dei colori, i codici esadecimali o codici RGBA (rosso, verde, blu, alfa) per impostare i colori per le frontiere. Impostare la larghezza del bordo ad un valore minore del raggio confine di mantenere angoli interni arrotondati.

Consigli e avvertenze

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

Articoli Correlati