Du kan give ethvert element "afrundede hjørner" ved at anvende et border-radiusgennem CSS. Du bemærker kun, hvis der er en farveændring involveret. For eksempel, hvis elementet har en baggrundsfarve eller kant, der er forskellig fra det element, det er forbi. Enkle eksempler:
#example-one ( border-radius: 10px; background: #BADA55; ) #example-two ( border-radius: 10px; border: 3px solid #BADA55; )Det er virkelig ikke nødvendigt længere, men for den absolut bedst mulige browsersupport kan du prefikse med -webkit-og -moz-:
.round ( /* Safari 3-4, iOS 1-3.2, Android 1.6- */ -webkit-border-radius: 12px; /* Firefox 1-3.6 */ -moz-border-radius: 12px; /* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */ border-radius: 12px; )Læg mærke til rækkefølgen af disse egenskaber: sælgerpræfikserne vises først, og den ikke-præfikserede "spec" -version vises sidst. Dette er den rigtige måde at gøre det på. Grænseradius er et særligt godt eksempel på, hvorfor vi gør det på den måde. I lidt mere kompliceret version af brugen border-radius(hvor du videregiver to værdier i stedet for en), ville det ældre -webkit-leverandørpræfiks gøre noget helt andet end “spec” -versionen. Så hvis vi blindt kopierer / indsætter de samme værdier til alle tre egenskaber, kunne vi se forskellige resultater på tværs af browseren. Lær mere om dette scenario. For at få den mest ensartede langsigtede er det bedst at liste “spec” -versionen sidst.
Det er ret realistisk i disse dage at droppe præfikser og bare bruge border-radius, som diskuteret her.
Hvis elementet har en billedbaggrund, klipes det naturligt i det afrundede hjørne:
#example-three ( border-radius: 20px; background: url(bglines.png.webp); /* will get clipped */ )Nogle gange kan du se en background-color"lækage" uden for en grænse, når den border-radiuser til stede. (se). For at forhindre dette bruger du baggrundsklip:
.round ( border-radius: 10px; /* Prevent background color leak outs */ -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; )Med kun en værdi border-radiusvil det være det samme på alle fire hjørner af et element. Men det behøver ikke være tilfældet. Du kan specificere hvert hjørne separat, hvis du ønsker det:
.round ( border-radius: 5px 10px 15px 20px; /* top left, top right, bottom right, bottom left */ )Du kan også angive to eller tre værdier. MDN forklarer det godt:
Hvis der er indstillet en værdi, gælder denne radius for alle 4 hjørner .
Hvis der er angivet to værdier, gælder den første for top-leftog bottom-righthjørne, den anden gælder for top-rightog bottom-lefthjørne.
Fire værdier gælder for top-left, top-right, bottom-right, bottom-lefthjørne i den rækkefølge.
Tre værdier: Den anden værdi gælder for top-rightog også bottom-left.
#example-four ( border-radius: 5px 20px 5px; background: #BADA55; )Du kan også angive de radier, hvor hjørnet afrundes. Med andre ord behøver afrundingen ikke at være perfekt cirkulær, den kan være elliptisk. Dette gøres ved hjælp af en skråstreg (“/”) mellem to værdier.
#example-five ( border-radius: 10px/30px; /* horizontal radius / vertical radius */ ) #example-six ( border-radius: 30px/10px; /* horizontal radius / vertical radius */ )Bemærk: Firefox understøtter kun elliptiske kanter i 3.5+ og ældre WebKit-browsere (f.eks. Safari 4) behandler forkert "40px 10px" som det samme som "40px / 10px".
Du kan angive værdien af border-radiusi procent. Dette er især nyttigt, når du vil oprette en cirkel- eller elipseform, men kan bruges når som helst, hvor kantradiusen skal være direkte korreleret med elementernes bredde.
#example-seven, #example-eight ( border-radius: 50%; ) #example-eight ( width: 200px; )Bemærk: I Safari-procentværdier for grænseradius understøttes kun i 5.1+. I Opera understøttes kun i 11.5+.
Her er hver enkelt ejendom med sælgerpræfikser:
.round ( -webkit-border-top-left-radius: 1px; -webkit-border-top-right-radius: 2px; -webkit-border-bottom-right-radius: 3px; -webkit-border-bottom-left-radius: 4px; -moz-border-radius-topleft: 1px; -moz-border-radius-topright: 2px; -moz-border-radius-bottomright: 3px; -moz-border-radius-bottomleft: 4px; border-top-left-radius: 1px; border-top-right-radius: 2px; border-bottom-right-radius: 3px; border-bottom-left-radius: 4px; )Bemærk: Hver af disse værdier kan også have en plads-adskilt værdi som "5px 10px", der opfører sig som en skråstreg-adskilt værdi i stenografi (vandret radius (mellemrum) lodret radius).
Ressourcer
- Hurtigt værktøj til at generere kantradiuskode
- Mozilla Docs
- På jagt efter den perfekte radius
- Har vi brug for at prefikere grænseradius længere?
Her er en lille ting at lege med de forskellige egenskaber og værdier:
Se Pen All the border-radius 'af Chris Coyier (@chriscoyier) på CodePen.
Browsersupport
Denne browsersupportdata er fra Caniuse, som har flere detaljer. Et tal angiver, at browseren understøtter funktionen i den version og opefter.
Desktop
| Chrome | Firefox | IE | Edge | Safari |
|---|---|---|---|---|
| 4 * | 3 * | 9 | 12 | 3.1 * |
Mobil / tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 2,1 * | 3,2 * |