Hvordan lage tekstbokser med avrundede hjørner

Cascading Style Sheets (CSS) er en standardisert måte å styre utseendet på HTML-elementer på websidene. CSS3 er et nytt sett med CSS standarder under utvikling av World Wide Web Consortium (W3C), som lover mange interessante nye måter å style sidene dine. Dessverre er de ulike delene av CSS3 ikke implementert på samme måte i alle de store nettlesere, slik at du må ta med noen overflødige kode for å maksimere kompatibilitet. Bruk varianter av "border-radius" stil å lage tekstbokser med avrundede hjørner.

Bruksanvisning

1 Legg til følgende CSS-kode mellom "hodet" kodene i HTML-dokumentet:

<Style type = "text / css">

.rounded {

-webkit-border-radius: 8px;

-moz-border-radius: 8px;

border-radius: 8px;

}

</ Style>

Jo større pikselverdien tilordnet disse egenskapene, er rundere hjørner som vil bli produsert.

2 Legg til følgende kode i kroppen av HTML-dokument for å opprette en tekstboks med avrundede hjørner:

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

Tildele så mange innspill bokser til "avrundet" -klassen som du vil.

3 Bruk et oppdrag inline stil for å gi avrundede hjørner til en enkelt element uten klasse erklæring i "head" -seksjonen:

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