Come creare caselle di input con angoli arrotondati

January 14

Cascading Style Sheets (CSS) è un modo standardizzato per controllare l'aspetto degli elementi HTML nelle pagine Web. CSS3 è una nuova serie di standard CSS attualmente in fase di sviluppo da parte del World Wide Web Consortium (W3C), che promette molti nuovi interessanti modi per acconciare i vostri pagine. Purtroppo, le varie componenti del CSS3 non sono implementate nello stesso modo in tutti i principali browser web, quindi è necessario includere un codice ridondante per massimizzare la compatibilità. Utilizzare varianti della proprietà "border-radius" stile per rendere caselle di input con gli angoli arrotondati.

istruzione

1 Aggiungere il seguente codice CSS tra i tag "testa" del documento HTML:

<Style type = "text / css">

.rounded {

-webkit-border-radius: 8px;

-moz-border-radius: 8px;

border-radius: 8px;

}

</ Style>

Maggiore è il valore del pixel assegnato a queste proprietà, il più rotondo gli angoli che saranno prodotti.

2 Aggiungere il seguente codice al corpo del documento HTML per creare una casella di input con gli angoli arrotondati:

<Input type = "text" class = "arrotondata" />

Assegnare le caselle di input per la classe "arrotondata" come ti piace.

3 Utilizzare un incarico stile in linea per dare angoli arrotondati ad un unico elemento, senza la dichiarazione della classe nella sezione "testa":

<Input type = "text" style = "- webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px;" />