Ľubovoľnému prvku môžete dať zaoblené rohy použitím border-radiuskódu CSS. Všimnete si, iba ak dôjde k farebnej zmene. Napríklad ak má prvok farbu pozadia alebo orámovanie, ktoré je odlišné od prvku, je po ňom. Jednoduché príklady:
#example-one ( border-radius: 10px; background: #BADA55; ) #example-two ( border-radius: 10px; border: 3px solid #BADA55; )Už to naozaj nie je potrebné, ale pre čo najlepšiu možnú podporu prehľadávača môžete predponu -webkit-a -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; )Všimnite si poradie týchto vlastností: prefixy dodávateľov sú uvedené ako prvé a verzia s predponou „spec“ je uvedená ako posledná. Toto je správny spôsob, ako to urobiť. Polomer hranice je obzvlášť dobrým príkladom toho, prečo to robíme týmto spôsobom. V mierne komplikovanejšej verzii použitia border-radius(kde namiesto jednej odovzdáte dve hodnoty) -webkit-by predpona staršieho dodávateľa urobila niečo úplne iné ako verzia „spec“. Takže ak slepo kopírujeme / vkladáme rovnaké hodnoty do všetkých troch vlastností, mohli by sme vidieť rôzne výsledky naprieč prehliadačmi. Získajte viac informácií o tomto scenári. Pre dlhodobú konzistenciu je najlepšie uviesť zoznam „spec“ verzií ako posledný.
V dnešnej dobe je celkom realistické upustiť od predpôn a použiť iba polomer hranice, ako je tu popísané.
Ak má prvok pozadie obrázka, bude orezaný v zaoblenom rohu prirodzene:
#example-three ( border-radius: 20px; background: url(bglines.png.webp); /* will get clipped */ )Niekedy je možné spozorovať background-color„únik“ mimo hranice, keď border-radiusje prítomný. (pozri). Aby ste tomu zabránili, použijete klip na pozadie:
.round ( border-radius: 10px; /* Prevent background color leak outs */ -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; )S iba jednou hodnotou border-radiusbude rovnaká vo všetkých štyroch rohoch prvku. Ale nemusí to tak byť. Každý roh môžete určiť osobitne, ak si prajete:
.round ( border-radius: 5px 10px 15px 20px; /* top left, top right, bottom right, bottom left */ )Môžete tiež určiť dve alebo tri hodnoty. MDN to vysvetľuje dobre:
Ak je nastavená jedna hodnota, tento polomer platí pre všetky 4 rohy .
Ak sú nastavené dve hodnoty, prvá platí pre top-lefta bottom-rightrohová, druhá platí pre top-righta bottom-leftrohová.
Štyri hodnoty sa vzťahujú k top-left, top-right, bottom-right, bottom-leftkútik v tomto poradí.
Tri hodnoty: Druhá hodnota platí pre top-righta tiež bottom-left.
#example-four ( border-radius: 5px 20px 5px; background: #BADA55; )Môžete tiež určiť polomery, v ktorých je roh zaoblený. Inými slovami, zaoblenie nemusí byť úplne kruhové, môže byť eliptické. To sa deje pomocou lomky („/“) medzi dvoma hodnotami.
#example-five ( border-radius: 10px/30px; /* horizontal radius / vertical radius */ ) #example-six ( border-radius: 30px/10px; /* horizontal radius / vertical radius */ )Poznámka: Firefox podporuje iba eliptické ohraničenia v prehliadačoch WebKit verzie 3.5 a vyššej (napr. Safari 4), ktoré nesprávne považujú „40px 10px“ za rovnaké ako „40px / 10px“.
Hodnotu môžete určiť border-radiusv percentách. To je obzvlášť užitočné, keď chcete vytvoriť tvar kruhu alebo elipsy, ale môžete ho použiť kedykoľvek, keď chcete, aby bol polomer ohraničenia priamo korelovaný so šírkou prvkov.
#example-seven, #example-eight ( border-radius: 50%; ) #example-eight ( width: 200px; )Poznámka: V Safari sú percentuálne hodnoty pre polomer ohraničenia podporované iba v 5.1 a novšej. V prehliadači Opera je podporované iba vo verzii 11.5 a novšej.
Tu je každá jednotlivá vlastnosť s predponami dodávateľov:
.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; )Poznámka: Každá z týchto hodnôt môže mať aj hodnotu oddelenú medzerou, napríklad „5px 10px“, ktorá sa chová ako hodnota oddelená lomítkom v skratke (horizontálny polomer (medzera), vertikálny polomer).
Zdroje
- Rýchly nástroj na generovanie kódu polomeru hranice
- Dokumenty Mozilla
- Pri hľadaní dokonalého polomeru
- Potrebujeme už predponu polomeru hranice?
Tu je malá vec na hranie s rôznymi vlastnosťami a hodnotami:
Prezrite si pero Celý polomer hranice 'od Chrisa Coyiera (@chriscoyier) na stránkach CodePen.
Podpora prehľadávača
Údaje o podpore tohto prehľadávača sú od spoločnosti Caniuse, ktorá obsahuje viac podrobností. Číslo označuje, že prehliadač podporuje túto funkciu v danej verzii alebo vyššej.
Desktop
| Chrome | Firefox | IE | Hrana | Safari |
|---|---|---|---|---|
| 4 * | 3 * | 9 | 12 | 3,1 * |
Mobil / tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 2,1 * | 3,2 * |