Ako používať vlastnosť CSS3 Border Radius

S CSS3 môžete dať ľubovoľnému prvku „zaoblené rohy“ pomocou border-radiusvlastnosti. Hodnota môže byť v ktorejkoľvek platnej dĺžkovej jednotke CSS.

 .rounded-corners { border-radius: 20px; } .circle { border-radius: 50%; }
príklady

Poznámka:border-radius nehnuteľnosť je vlastne skratka vlastnosť preborder-top-left-radius,border-top-right-radius,border-bottom-right-radiusaborder-bottom-left-radiusvlastnosťami.

Ak je poskytnutá iba jedna hodnota, polomer ohraničenia bude rovnaký pre všetky štyri rohy, ako v príkladoch vyššie. Máte však tiež možnosť určiť rôzne hodnoty pre každý roh.

.new-shape { border-radius: 20px 50px 5px 0; /* top left, top right, bottom right, bottom left */ }

Ak sú poskytnuté iba dve hodnoty, prvá hodnota sa použije v ľavom hornom a pravom dolnom rohu a druhá hodnota v pravom hornom a ľavom dolnom rohu.

.leaf-shape { border-radius: 0 50%; }

Ak sú nastavené tri hodnoty, prvá opäť platí pre polomer zľava, druhá hodnota označuje pravý horný a ľavý dolný okraj, zatiaľ čo tretia hodnota označuje pravý dolný roh.

.odd-shape { border-radius: 0 20px 50%; }
príklady

Zaoblenie rohu nemusí byť úplne symetrické. Horizontálny aj vertikálny polomer môžete určiť pomocou lomítka („/“), aby ste dosiahli roh eliptického tvaru.

.elliptical-1 { border-radius: 50px/10px; /* horizontal radius / vertical radius */ } .elliptical-2 { border-radius: 10px/50px; }
príklady

Pretože vo vyššie uvedených príkladoch je uvedená iba jedna dvojica hodnôt, všetky štyri rohy sú rovnaké. Ale samozrejme, ak chcete zložitejší tvar, môžete dodať až štyri hodnoty pre horizontálne polomery a štyri pre vertikálne polomery.

.elliptical-3 { border-radius: 50px 20px 50px 20px/20px 50px 20px 50px; /* horizontal top-left, horizontal top-right, horizontal bottom-right, horizontal bottom-left / vertical top-left, vertical top-right, vertical bottom-right, vertical bottom-left */ }

Všimnite si, ako skratka hore produkuje rovnaký výsledok ako zadanie jednotlivých vlastností nižšie. Upozorňujeme, že keď sú rohy nastavované jednotlivo, hodnoty sú oddelené medzerou namiesto lomky.

.elliptical-4 { border-top-left-radius: 50px 20px; /* horizontal radius, vertical radius */ border-top-right-radius: 20px 50px; border-bottom-right-radius: 50px 20px; border-bottom-left-radius: 20px 50px; }
príklady

Ďalšie informácie o vlastnosti CSS border radius:

  • Naučte sa používať vlastnosť polomeru hranice CSS zostavením kalkulačky