Avrundede Border Stiler i CSS

Avrundede kanter har blitt mye enklere å gjøre i CSS siden CSS3. Grensen-radius eiendom hovedsak bringer avrundede hjørner til elementer gjennom rene CSS erklæringer. Nettleserstøtte for border-radius eiendom er ikke konsekvent, men så når du bruker denne egenskapen på en webside, er det en god idé å legge ytterligere to erklæringer.

Making Avrundede hjørner

Grensen-radius Eiendommen ligger erklæringen som produserer avrundede hjørner. Grensen radius verdi bruker pikselinnstillinger eller em mellomrom, hvor høyere tall øker mengden av kurven. Det samme som med margin, padding og border, det er separate border-radius egenskaper for hvert hjørne av et element. Hvis to verdier er lagt inn, blir de horisontale og vertikale radier for en elliptisk hjørne.

Mozilla Variasjon

Mozilla nettlesere krever små variasjoner til CSS3 koden for å implementere avrundede kanter. Enten du bruker "px" eller "em" verdier, ett eller to tall gir forskjellige resultater. Mozilla syntaks før Firefox 3.5 støttes bare runde kanter for et ensifret; tilsetning av en andre verdi som vil resultere i en standard kvadratisk hjørne. Nyere Firefox syntaks tillater definisjonen av fire forskjellige runde eller elliptiske hjørner. En skråstrek mellom to tall tolkes som horisontale og vertikale innstillinger.

border-top-høyre-radius, -moz-border-radius-topright

border-bottom-høyre-radius, -moz-border-radius-bottomright

border-bottom-venstre-radius, -moz-border-radius-bottomleft

border-top-venstre-radius, -moz-border-radius-topleft

border-radius, -moz-border-radius

WebKit Variasjon

Grensen-radius eiendom i WebKit, som er det nettleseren Safari bruker, godtar en eller to verdier og bruker dem i styling alle fire hjørner for en symmetrisk form. I likhet med Mozilla variasjon avviker WebKit variasjon noe fra CSS3 erklæringen.

border-top-høyre-radius, -webkit-border-top-høyre-radius

border-bottom-høyre-radius, -webkit-border-bottom-høyre-radius

border-bottom-venstre-radius, -webkit-border-bottom-venstre-radius

border-top-venstre-radius, -webkit-border-top-venstre-radius

border-radius, -webkit-border-radius

Avrundet Border Bruke Bokser

Den wrapper div produserer en avrundet kant innenfor et avgrenset område som en boks, i motsetning til en ramme rundt omkretsen av div. Dette er skapt av styling moder div med et barn div. Koden er enkelt for de flinke på koding:

.pakke inn {

border-width: 0;

background-color: # A52A2A;

width: 54%;

padding: 0.6em;

}

.wrap #panel {

background-color: arve;

høyde: 6em;

border: 4px stiplede # A52A2A;

text-align: center;

}

Og html:

<Div class = "wrap">

<Div id = "panel">

<P> Dette panelet vises som en sydd indre grensen. </ P>

</ Div>

</ Div>