Hvordan lage Avrundet Divs Bruke CSS

Hvordan lage Avrundet Divs Bruke CSS


Før nettlesere ble kompatibelt med "border-radius" tilhører Cascading Style Sheets (CSS), designere nødvendig å kutte opp hjørner i grafiske redigeringsprogrammer, og deretter bruke dem til websider ved hjelp kompliserte layout triks. Med "border-radius", kan du lage avrundede divs med bare en linje eller to av kode og ingen bilder. Du kan selv endre figurer av avrundede hjørner og bruke en annen avrunding til hvert hjørne av en DIV.

Bruksanvisning

1 Åpne HTML-fil i en kode editor som jEdit, Notepad ++ eller BBEdit. Skriv "<div>" koder inn koden som dette:

<Div> </ div>

Skriv inn ditt innhold mellom "<div>" koder. Du kan plassere alt innhold du liker, for eksempel bilder og tekst.

2 Legg et ID-attributtet til åpning "<div>" tag. Bruk ID for å gi din DIV en unik og meningsfullt navn. Du kan ikke bruke en ID mer enn en gang på samme webside uten å forårsake layout problemer når du prøver å målrette ID i CSS. Legg ID-attributtet som dette:

<Div id = "avrundet"> Innholdet ditt ... </ div>

3 Bla opp i HTML-fil og se etter "<link>" eller "<style>" tags. Åpne en CSS-fil referert til av en "<link>" tag og legge til CSS-koden der. Hvis du bare finner "<style>" tags, og deretter legge CSS-kode mellom disse kodene. Du kan legge til kodene selv, også, mellom "<head>" koder.

4 Skriv en velger - kode for å "velge" et HTML-element - for å målrette DIV av sin ID navn. Legg til "border-radius" eiendom mellom krøllparenteser og sette den til en pikselverdi. Koden ser slik ut:

avrundet {border-radius: 10px;}

Høyere radius verdier gjør divs mer avrundet, mens lavere verdier gir en mer subtil avrunding effekt.

5 Legg til en radius lengde for å endre formen på den kurve som dette:

avrundet {border-radius: 20px 10px;}

Eksempelet ovenfor gir grense en hjørneradius av 10 bildeelementer, og angir bredden av hjørnet til tyve piksler.

6 Gi hvert hjørne sin egen "border-radius" stil som dette:

avrundet {

border-top-venstre-radius: 10px;

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

border-bottom-venstre-radius: 30px;

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

}

Hint

  • Still "border-radius" til en verdi større enn padding verdien av DIV å gjøre de indre hjørnene avrundet når du bruker en tykk kant.
  • Som av mai 2011, alle nettlesere støtter "border-radius" uten bruk av leverandørens prefikser. Du trenger ikke å legge til egenskaper som "-webkit-border-radius" for å gjøre avrundede hjørner fungere.