CSS avrundede hjørner Tutorial

CSS avrundede hjørner Tutorial


Cascading Style Sheets (CSS) nivå tre - mer kjent som CSS3 - gir Webdesignere evnen til å skape mange visuelle effekter som tidligere krevde komplisert bilde slicing. I stedet for å kutte opp bilder i en grafikk editor og bruke dem til dine websider, kan du nå bruke noen få linjer med CSS-kode. Avrundede hjørner, for eksempel, krever bare "border-radius" eiendom. Smart bruk av denne egenskapen kan skape en rekke former, inkludert sirkler. Bruk "border-radius" eiendom i CSS for å lage avrundede hjørner på nesten alle HTML-elementet.

Bruksanvisning

Forberede HTML kode

1 Opprett en ny HTML-fil i en kode editor eller Notisblokk. Kopier og lim inn denne koden inn i filen:

<Html>

<Head>

<Title> Corners Tutorial </ title>

</ Head>

<Body>

</ Body>

</ Html>

2 Legg et par div koder mellom body-kodene på HTML-filen. Gi div ID-navn. Koden for div bør se slik ut:

<Div id = "avrundet"> </ div>

3 Legg et par stil koder etter tittelen kodene i hodet HTML filen. Her er et eksempel på stil tags:

<Style type = "text / css"> </ style>

Påfør avrundede hjørner ved hjelp av CSS

4 Lag en blank linje mellom stil kodene dine og legg til følgende kode:

avrundet {}

Erstatt "avrundet" med navnet du ga div.

5 Still "border-radius" egenskapen til en pikselverdien av ditt valg. Verdien av grensen radius bestemmer hvor mye avrunding som nettlesere gjelder for div. Her er et eksempel:

avrundet {

border-radius: 10px;

}

6 Gi hvert hjørne en annen kurve størrelse ved å sette "border-radius" eiendom for hver enkelt. Her er hvordan koden ser ut:

avrundet {

border-top-venstre-radius: 10px;

border-top-høyre-radius: 15px;

border-bottom-venstre-radius: 20px;

border-bottom-høyre-radius: 25px;

}

7 Strekk ut de avrundede hjørner ved å legge til "lengde" verdier til din "border-radius" egenskaper. Her er koden:

border-top-venstre-radius: 100px 50 piksler;

Den "lengde" verdi er 100 piksler og radius er satt til 50 piksler. Dette skaper en kurve som er lengre enn høy. Omvendt verdiene for å lage en kurve som er lengre enn bredt.

Hint

  • Du kan også angi "border-radius" egenskaper til prosentverdier. Påfør "border-radius: 50%;" å slå div inn i en sirkel.
  • Påfør "border-radius" egenskaper til noen HTML element du vil. Istedenfor å lage en div, bør du vurdere å runde hjørnene av overskrifter eller bilder.
  • Disse CSS3 koder vil ikke fungere på eldre nettlesere, inkludert Internet Explorer 8 og under. Vurder å bruke et bildebasert eller Javascript fallback for de nettlesere eller tillate brukere av disse nettleserne for å se skarpe hjørner i stedet.