Jebkuram elementam varat piešķirt noapaļotus stūrus, border-radiusizmantojot CSS. Jūs pamanīsit tikai tad, ja ir mainīta krāsa. Piemēram, ja elementa fona krāsa vai apmale atšķiras no tā, kuram tas ir beidzies. Vienkārši piemēri:
#example-one ( border-radius: 10px; background: #BADA55; ) #example-two ( border-radius: 10px; border: 3px solid #BADA55; )Tas tiešām vairs nav vajadzīgs, taču, lai nodrošinātu vislabāko iespējamo pārlūka atbalstu, jūs varētu pievienot prefiksu ar -webkit-un -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; )Ievērojiet šo rekvizītu secību: pārdevēja prefiksi ir uzskaitīti pirmie, bet nepieliktais “spec” variants ir norādīts pēdējais. Tas ir pareizs veids, kā to izdarīt. Robežu rādiuss ir īpaši labs piemērs tam, kāpēc mēs to darām tā. Nedaudz sarežģītākā lietošanas versijā border-radius(kur jūs nododat divas vērtības, nevis vienu) vecāks -webkit-piegādātāja prefikss darīs kaut ko pilnīgi atšķirīgu no “spec” versijas. Tātad, ja mēs akli kopējam / ielīmējam tās pašas vērtības visām trim īpašībām, pārlūkprogrammā var redzēt dažādus rezultātus. Uzziniet vairāk par šo scenāriju. Lai panāktu konsekvenci ilgtermiņā, vislabāk ir norādīt pēdējo “spec” versiju.
Mūsdienās ir diezgan reāli nomest prefiksus un vienkārši izmantot robežas rādiusu, kā šeit apspriests.
Ja elementam ir attēla fons, tas dabiski tiek sagriezts noapaļotajā stūrī:
#example-three ( border-radius: 20px; background: url(bglines.png.webp); /* will get clipped */ )Dažreiz jūs varat redzēt background-color“noplūdi” ārpus robežas, kad tā border-radiusir. (skat.). Lai to novērstu, izmantojat fona klipu:
.round ( border-radius: 10px; /* Prevent background color leak outs */ -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; )Tikai ar vienu vērtību border-radiustas pats būs visos četros elementa stūros. Bet tam nav jābūt. Ja vēlaties, katru stūri varat norādīt atsevišķi.
.round ( border-radius: 5px 10px 15px 20px; /* top left, top right, bottom right, bottom left */ )Varat arī norādīt divas vai trīs vērtības. MDN to labi izskaidro:
Ja ir iestatīta viena vērtība, šis rādiuss attiecas uz visiem 4 stūriem .
Ja ir iestatītas divas vērtības, pirmā attiecas uz top-leftun bottom-rightstūri, otrā attiecas uz top-rightun bottom-leftstūri.
Četri vērtības attiecas uz top-left, top-right, bottom-right, bottom-leftstūra šādā secībā.
Trīs vērtības: otrā vērtība attiecas top-rightarī uz bottom-left.
#example-four ( border-radius: 5px 20px 5px; background: #BADA55; )Varat arī norādīt rādiusus, par kuriem stūri noapaļo. Citiem vārdiem sakot, noapaļošanai nav jābūt pilnīgi apļveida, tas var būt eliptisks. Tas tiek darīts, izmantojot slīpsvītru (“/”) starp divām vērtībām.
#example-five ( border-radius: 10px/30px; /* horizontal radius / vertical radius */ ) #example-six ( border-radius: 30px/10px; /* horizontal radius / vertical radius */ )Piezīme: Firefox atbalsta elipsveida apmales tikai 3.5+ un vecākās WebKit pārlūkprogrammās (piemēram, Safari 4) nepareizi izturas pret “40px 10px” kā pret “40px / 10px”.
Jūs varat norādīt vērtību border-radiusprocentos. Tas ir īpaši noderīgi, ja vēlaties izveidot apļa vai elipses formu, taču to var izmantot jebkurā laikā, kad vēlaties, lai apmales rādiuss būtu tieši saistīts ar elementu platumu.
#example-seven, #example-eight ( border-radius: 50%; ) #example-eight ( width: 200px; )Piezīme. Pārlūkprogrammā Safari robežas rādiusa procentuālās vērtības tiek atbalstītas tikai versijās 5.1+. Operā, atbalsta tikai 11.5+ versijā.
Šeit ir katrs īpašums ar pārdevēja prefiksiem:
.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; )Piezīme. Katrai no šīm vērtībām var būt arī ar atstarpi atdalīta vērtība, piemēram, “5 pikseļi 10 pikseļi”, kas īsumā (horizontālā rādiusa (atstarpe) vertikālais rādiuss) darbojas kā ar slīpsvītru atdalīta vērtība.
Resursi
- Ātrs rīks robežas rādiusa koda ģenerēšanai
- Mozilla Docs
- Ideālā rādiusa meklējumos
- Vai mums vairs nav jāpievieno robežas rādiuss?
Šeit ir neliela lieta, ko spēlēt ar dažādām īpašībām un vērtībām:
Skatiet Kriss Koijers (@chriscoyier) Pildspalva visu robežas rādiusu vietnē CodePen.
Pārlūka atbalsts
Šie pārlūka atbalsta dati ir no Caniuse, kurai ir sīkāka informācija. Cipars norāda, ka pārlūks atbalsta šo un jaunākās versijas funkciju.
Darbvirsma
| Chrome | Firefox | IE | Mala | Safari |
|---|---|---|---|---|
| 4 * | 3 * | 9 | 12 | 3,1 * |
Mobilais / planšetdators
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 2,1 * | 3,2 * |