Hvordan legge til buede kanter i CSS

Den CSS3 avrundede kanter funksjonen gir deg muligheten til å enkelt lage rthe buet kant effekt, og har støtte av Internet Explorer 9, Firefox 4, Safari 5 og andre store nettlesere. Buet grenser bidra til å skape en følelse av balanse i en nettside design. Deres glatte hjørner kuttet monotonien av rette linjer og gi en side en mykere look.

Bruksanvisning

1 Finn CSS velgeren å legge til de buede kanter til. Sett "border-radius" eiendom og skriv verdien i enten prosent eller enhet, slik som piksler eller EMS. Jo høyere tall, jo mer avrundet kurven. For eksempel, for å gjøre kantene på en <div> tag 50 piksler i størrelse, skriv:

div
{
border-style: solid; /

Kommentar: Dette er nødvendig for å gjøre han grenser synlig /.
border-radius: 50 piksler;
}

2 Skriv grense eiendommene individuelt hvis du ønsker å tilordne en annen kurve beløp til hvert hjørne. Følg rekkefølgen øverst til venstre, øverst til høyre, nederst til høyre, nederst til venstre, som vist nedenfor:

div {border-style: solid;
border-top-venstre-radius: 1em;
border-top-høyre-radius: 2em;
border-bottom-høyre-radius: 3em;
border-bottom-venstre-radius: 4em;
}

3 Skriv grensen radius egenskaper i en enkelt erklæring, som følger. Bruk denne stenografi metoden hvis du ikke ønsker å erklære hvert hjørne eiendom individuelt. Dette eksempelet fører øverst til venstre og nederste venstre hjørne for å være vinkel mens øverst til høyre og nedre høyre hjørne er buet.

div {border-radius: 0EM 3em 3em 0EM;
}

Hint

• Hvert hjørne kan ha opptil to verdier. For eksempel kan eiendommen "border-top-right-radius" har en verdi på "2em 1em." Den første verdien er den horisontale radius, den andre verdien er den vertikale radius. Hvis du skriver inn bare én verdi, den samme verdien brukes både radier.
• Prefikset "-moz-" (uten anførselstegn) før "border-radius" eiendom for Firefox 3.6 og tidligere.
• Buet grenser fungerer ikke med Internet Explorer-versjoner eldre enn IE9.