Hvordan laver Div Afrundet og Grænser Kasser i CSS kode

April 3

Web-udviklere bruger CSS (Cascading Style Sheets) som en metode til at anvende visuelle effekter til websider. Da mulighederne i CSS ekspandere, kan udviklere kassere flere af deres billedfiler hacks og andre klodsede teknikker i bytte for kode-kun visuelle effekter. Afrundede hjørner, der blev indført som en del af CSS niveau 3 (CSS3), udgør en af ​​disse fremskridt. Uden vanskelige billede udskæring og akavet kodning, kan du anvende runde hjørner for enhver HTML-element, herunder divs. Når du tilføjer en kant til den afrundede div, vil du også se grænsen bliver afrundet.

Instruktioner

1 Åbn en HTML-fil i Notesblok eller en kode editor og kontroller, at koden indeholder "<style>" tags:

<Style type = "text / css">

</ Style>

Tilføj disse tags, hvis du ikke kan finde dem i koden.

2 Åbn en HTML-fil i Notesblok eller en kode editor og kontroller, at koden indeholder "<style>" tags:

<Style type = "text / css">

</ Style>

Tilføj disse tags, hvis du ikke kan finde dem i koden.

3 Gå til din "<style>" tags og tilføje en stil regel for kassen:

box {

}

Skift "kasse" til ID-navn, du fundet inde i "<div>" tags. præfiks altid dine id navne med hash symboler i CSS.

4 Tilsæt "border-radius" ejendom til din stil regel:

box {

border-radius: 25px;

}

Denne kode opretter en 25 pixel border radius for hvert hjørne af div. Du kan angive individuelle hjørner hjælp egenskaber navngivne "border-top-venstre-radius" og så videre.

5 Giv din boks en kant ved hjælp af "grænse" ejendom:

box {

border-radius: 25px;

kant: 10px solid lilla;

}

Dette er en kort hånd ejendom, der tager tre værdier: bredde, stil og farve. Brug farve navne, hexadecimale koder eller RGBA (rød, grøn, blå, Alpha) koder for at angive farverne for grænserne. Indstil bredden af ​​grænsen til en værdi mindre end radius grænsen til at holde indre hjørner afrundede.

TIPS

  • Ændre formen på en kurve ved at tilføje en anden værdi til "border-radius." Den første værdi bliver længden af ​​kurven, mens den anden bliver højden: "border-radius: 25px / 50px;"

relaterede artikler