A CSS3 Border Radius tulajdonság használata

A CSS3 segítségével bármely elemnek „lekerekített sarkokat” adhat a border-radiustulajdonság használatával. Az érték bármilyen érvényes CSS hosszúságegységben lehet.

 .rounded-corners { border-radius: 20px; } .circle { border-radius: 50%; }
példák

Megjegyzés: Azborder-radiusingatlan tulajdonképpen egy rövid tulajdonság azborder-top-left-radius,border-top-right-radius,border-bottom-right-radiusésborder-bottom-left-radiustulajdonságait.

Ha csak egy értéket ad meg, a határ sugara mind a négy sarokban megegyezik, mint a fenti példákban. De arra is lehetősége van, hogy minden sarokhoz különböző értékeket adjon meg.

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

Ha csak két értéket ad meg, az első érték a bal felső és a jobb alsó sarokra, a második a jobb felső és a bal alsó sarokra vonatkozik.

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

Három érték beállítása esetén az első ismét a bal felső sugárra vonatkozik, a második érték a jobb felső és a bal alsó sarokra utal, a harmadik érték pedig a jobb alsó sarok jelzésére szolgál.

.odd-shape { border-radius: 0 20px 50%; }
példák

A sarok lekerekítésének nem kell tökéletesen szimmetrikusnak lennie. Az ellipszis alakú sarok eléréséhez perjel (”/”) segítségével megadhatja mind a vízszintes, mind a függőleges sugarat.

.elliptical-1 { border-radius: 50px/10px; /* horizontal radius / vertical radius */ } .elliptical-2 { border-radius: 10px/50px; }
példák

Mivel a fenti példákban csak egy értékpár szerepel, mind a négy sarok ugyanaz. Természetesen, ha összetettebb alakzatot szeretne, akkor legfeljebb négy értéket adhat meg a vízszintes sugárhoz, és négyet a függőleges sugárhoz.

.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 */ }

Vegye figyelembe, hogy a fenti gyorsírás ugyanazt az eredményt hozza-e, mint az alábbiakban megadott egyes tulajdonságok megadása. Ne feledje, hogy ha a sarkokat külön-külön állítják be, akkor az értékek szóközzel vannak elválasztva perjel helyett.

.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; }
példák

További információ a CSS határsugár tulajdonságáról:

  • Tanuljon meg egy CSS border radius tulajdonságot használni egy számológép felépítésével