Kõigile elementidele saate anda ümardatud nurgad, rakendades border-radiusCSS-i kaudu. Märkate ainult siis, kui tegemist on värvimuutusega. Näiteks kui elemendi taustavärv või ääris erineb selle elemendist, mille see on ületanud. Lihtsad näited:
#example-one ( border-radius: 10px; background: #BADA55; ) #example-two ( border-radius: 10px; border: 3px solid #BADA55; )See pole tõesti enam vajalik, kuid absoluutselt parima võimaliku brauseri toe jaoks võiksite kasutada eesliidet -webkit-ja -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; )Pange tähele nende omaduste järjekorda: esimesena on toodud müüja eesliited ja viimasena loetletud eesliiteta „spec” versioon. See on õige viis seda teha. Piiri raadius on eriti hea näide, miks me seda niimoodi teeme. Kasutamise veidi keerukamas versioonis border-radius(kus edastate ühe asemel kaks väärtust) -webkit-teeks vanem hankija eesliide hoopis midagi muud kui „spec” versioon. Nii et kui kopeerime / kleepime samad väärtused pimesi kõigile kolmele atribuudile, näeme brauserite vahel erinevaid tulemusi. Lisateave selle stsenaariumi kohta. Pikaajalise järjepidevuse tagamiseks on kõige parem loetleda „spec” versioon viimasena.
Tänapäeval on päris realistlik loobuda eesliidetest ja kasutada lihtsalt piiriraadiust, nagu siin arutletud.
Kui elemendil on pildi taust, lõigatakse see ümardatud nurgas loomulikult:
#example-three ( border-radius: 20px; background: url(bglines.png.webp); /* will get clipped */ )Mõnikord näete background-color"lekkimist" väljaspool piiri, kui see border-radiuson olemas. (vt). Selle vältimiseks kasutage taustalõiku:
.round ( border-radius: 10px; /* Prevent background color leak outs */ -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; )Ainult ühe väärtusega border-radiuson sama elemendi kõigis neljas nurgas. Kuid see ei pea nii olema. Soovi korral saate iga nurga eraldi määrata:
.round ( border-radius: 5px 10px 15px 20px; /* top left, top right, bottom right, bottom left */ )Samuti saate määrata kaks või kolm väärtust. MDN selgitab seda hästi:
Kui on määratud üks väärtus, kehtib see raadius kõigi nelja nurga jaoks .
Kui on määratud kaks väärtust, kehtib esimenetop-left ja bottom-rightnurk, teine kehtib top-rightja bottom-leftnurga kohta.
Neli väärtusi kohaldatakse top-left, top-right, bottom-right, bottom-leftnurgas selles järjekorras.
Kolm väärtust: teine väärtus kehtib top-rightja ka bottom-left.
#example-four ( border-radius: 5px 20px 5px; background: #BADA55; )Samuti võite määrata raadiused, mille võrra nurk on ümardatud. Teisisõnu, ümardamine ei pea olema täiesti ümmargune, see võib olla elliptiline. Selleks kasutatakse kaldkriipsu (“/”) kahe väärtuse vahel.
#example-five ( border-radius: 10px/30px; /* horizontal radius / vertical radius */ ) #example-six ( border-radius: 30px/10px; /* horizontal radius / vertical radius */ )Märkus: Firefox toetab elliptilisi piire ainult 3.5+ ja vanemates WebKiti brauserites (nt Safari 4) käsitleb valet „40px 10px” valesti kui „40px / 10px”.
Võite määrata väärtuse border-radiusprotsentides. See on eriti kasulik, kui soovite luua ringi või ellipsikuju, kuid seda saab kasutada igal ajal, kui soovite, et piiri raadius oleks otseselt korrelatsioonis elementide laiusega.
#example-seven, #example-eight ( border-radius: 50%; ) #example-eight ( width: 200px; )Märkus . Safari piirjoone raadiuse protsendiväärtused on toetatud ainult versioonides 5.1+. Operas, toetatud ainult versioonis 11.5+.
Siin on iga üksik vara koos müüja eesliidetega:
.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; )Märkus. Kõigil nendel väärtustel võib olla ka tühikutega eraldatud väärtus, näiteks „5px 10px”, mis käitub lühikese (horisontaalse raadiusega (tühik) vertikaalse raadiusena) nagu kaldkriipsuga eraldatud väärtus.
Ressursid
- Kiire tööriist piiri raadiuse koodi genereerimiseks
- Mozilla dokumendid
- Täiusliku raadiuse otsimisel
- Kas peame enam ette kandma piiri raadiuse?
Erinevate omaduste ja väärtustega mängimiseks on väike asi:
Vaadake Code Cenil Chris Coyieri (@chriscoyier) pliiatsit kogu piiri raadiuses.
Brauseri tugi
Need brauseri tugiandmed pärinevad Caniuse'ilt, millel on üksikasjalikum teave. Number näitab, et brauser toetab selle versiooni ja uuemat funktsiooni.
Töölaud
| Chrome | Firefox | IE | Edge | Safari |
|---|---|---|---|---|
| 4 * | 3 * | 9 | 12 | 3,1 * |
Mobiil / tahvelarvuti
| Android Chrome | Android Firefox | Android | iOS-i Safari |
|---|---|---|---|
| 88 | 85 | 2,1 * | 3,2 * |