Hvordan lage en HTML-Curve Border for en Div

February 15

En av de mest spennende utviklingen i CSS3 er muligheten til å designe fancy grenser. Med stilark, kan du nå opprette grenser med avrundede hjørner, bilde grenser og grenser med en skygge effekt. Disse fancy grenser tillate Webdesigner å unnslippe den ensformige rette linjer og hjelpe tekst skiller seg ut fra en flat bakgrunn.

Bruksanvisning

1 Åpne stilark knyttet til HTML-dokumenter. Hvis du ikke allerede har gjort en, opprette en ny tekstfil og lagre den som en CSS-fil som "style.css" uten anførselstegn. Åpne stilark i et HTML eller tekst editor.

2 Skriv inn følgende CSS-regel for DIV tag. Merk at "div" delen er velgeren; klammeparenteser vil legge erklæringer.

div {}

3 Skriv inn følgende erklæringer for å angi kantlinjer. Den første erklæringen er en CSS stenografi som definerer rammetykkelsen, stil og farge, henholdsvis. Endre verdiene skal gjelde stilene du ønsker. Den andre linjen avgjør hvor mye grensen vilje kurve. Jo høyere tall, jo større kurven beløp. En tilleggserklæring nederst kan legges for å sikre kompatibilitet med Firefox 3.6 og tidligere.

div

{

border: 1px solid # a0a0a0;

border-radius: 15px;

-moz-border-radius: 15px;

}

4 Legg erklæringene nedenfor for å sette grensen bredde, bakgrunnsfarge og polstring. Polstringen skaper mellomrom mellom tekst og grenselinjer. Endre verdiene til fargen og størrelsen du trenger.

padding: 20px 40px;

bakgrunn: gul;

bredde: 350 piksler;

5 Lagre stilark fil. Hele CSS-regel for DIV tag bør ligne på følgende:

div

{