Poloměr ohraničení - Triky CSS

Každému prvku můžete dát „zaoblené rohy“ použitím border-radiusprůchozího CSS. Všimnete si, pouze pokud dojde ke změně barvy. Například pokud má prvek barvu pozadí nebo ohraničení, které se liší od prvku, je u konce. Jednoduché příklady:

#example-one ( border-radius: 10px; background: #BADA55; ) #example-two ( border-radius: 10px; border: 3px solid #BADA55; )

Už to opravdu není nutné, ale pro absolutně nejlepší možnou podporu prohlížeče můžete předponu -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šimněte si pořadí těchto vlastností: prefixy dodavatele jsou uvedeny jako první a verze s předponou „spec“ je uvedena jako poslední. Toto je správný způsob, jak to udělat. Poloměr ohraničení je obzvláště dobrým příkladem toho, proč to děláme tímto způsobem. V mírně komplikovanější verzi použití border-radius(kde předáte dvě hodnoty místo jedné) -webkit-by prefix staršího dodavatele udělal něco úplně jiného než verze „spec“. Takže pokud slepě kopírujeme / vkládáme stejné hodnoty do všech tří vlastností, mohli bychom vidět různé výsledky napříč prohlížeči. Další informace o tomto scénáři. Pro dlouhodobou konzistenci je nejlepší uvést poslední verzi „spec“.

V dnešní době je docela realistické upustit předpony a použít pouze poloměr ohraničení, jak je zde diskutováno.

Pokud má prvek pozadí obrázku, bude oříznut v zaobleném rohu přirozeně:

#example-three ( border-radius: 20px; background: url(bglines.png.webp); /* will get clipped */ )

Někdy můžete vidět background-color„únik“ mimo hranici, pokud border-radiusje přítomen. (vidět). Chcete-li tomu zabránit, použijte klip na pozadí:

.round ( border-radius: 10px; /* Prevent background color leak outs */ -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; )

S jedinou hodnotou border-radiusbude stejný ve všech čtyřech rozích prvku. Ale nemusí tomu tak být. Každý roh můžete určit zvlášť, pokud si přejete:

.round ( border-radius: 5px 10px 15px 20px; /* top left, top right, bottom right, bottom left */ )

Můžete také zadat dvě nebo tři hodnoty. MDN to vysvětluje dobře:

Pokud je nastavena jedna hodnota, platí tento poloměr pro všechny 4 rohy .
Pokud jsou nastaveny dvě hodnoty, první platí pro top-lefta bottom-rightroh, druhá platí pro top-righta bottom-leftroh.
Čtyři hodnoty se vztahují k top-left, top-right, bottom-right, bottom-leftkoutek v tomto pořadí.
Tři hodnoty: Druhá hodnota platí pro top-righta také bottom-left.

#example-four ( border-radius: 5px 20px 5px; background: #BADA55; )

Můžete také určit poloměry, ve kterých je roh zaoblen. Jinými slovy, zaoblení nemusí být dokonale kruhové, může být eliptické. To se provádí lomítkem („/“) mezi dvěma 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 pouze eliptické ohraničení v prohlížečích WebKit verze 3.5+ a starších (např. Safari 4) nesprávně považuje „40px 10px“ za stejné jako „40px / 10px“.

Můžete zadat hodnotu border-radiusv procentech. To je zvláště užitečné, když chcete vytvořit tvar kruhu nebo elipsy, ale lze ho použít kdykoli, když chcete, aby byl poloměr ohraničení přímo korelován se šířkou prvků.

#example-seven, #example-eight ( border-radius: 50%; ) #example-eight ( width: 200px; )

Poznámka: V Safari jsou procentní hodnoty pro poloměr ohraničení podporovány pouze v 5.1+. V prohlížeči Opera je podporováno pouze od verze 11.5+.

Tady je každá jednotlivá vlastnost s předponami dodavatele:

.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 hodnot může mít také hodnotu oddělenou mezerou, například „5px 10px“, která se chová jako hodnota oddělená lomítkem ve zkratce (horizontální poloměr (mezera), vertikální poloměr).

Zdroje

Rychlý nástroj pro generování kódu poloměru hranic
Dokumenty Mozilla
Při hledání dokonalého poloměru
Musíme ještě předponu poloměru ohraničení?

Tady je malá věc na hraní s různými vlastnostmi a hodnotami:

Podívejte se na Pen All the border-radius 'od Chris Coyier (@chriscoyier) na CodePen.

Podpora prohlížeče

Tato data podpory prohlížeče pocházejí z Caniuse, který obsahuje více podrobností. Číslo označuje, že prohlížeč podporuje tuto funkci v dané verzi a vyšší.