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;" />