CSS
HTML
COMPONENTS
CODE HUB
CSS Border Radius Generátor
Konfiguráció
Határ sugara: 50px
Osztály
Előnézet
Kód
border-radius: 50px;Tanulj meg kódolni Larával
Sajátítsd el a programozási alapokat lépésről lépésre az interaktív AI tutorod segítségével. Lara elmagyarázza a komplex logikát, átnézi a gyakorló feladataidat, és segít szilárd alapokat építeni a szoftverfejlesztésben.
Interaktív kódolási leckék a saját tempódra szabva.
Tanulás indítása LarávalCSS Border Radius Generátor
A CSS border-radius tulajdonságot HTML elemek sarkainak lekerekítésére használják. Lehetővé teszi, hogy lekerekített sarkú elemeket hozz létre, ami lágyabb és vizuálisan vonzóbb megjelenést biztosít a tervezésednek.
A border-radius tulajdonság elfogadhat egy vagy két értéket, amelyek meghatározzák az elem négy sarkának sugárát. Ha két értéket adsz meg, az első érték a vízszintes sugarat, a második pedig a függőleges sugarat állítja be. Ha csak egy értéket adsz meg, az mind a vízszintes, mind a függőleges sugarat beállítja, így minden sarok egyenlően lekerekített lesz.
Íme az alap szintaxis:
.rounded-element {
border-radius: 10px;
}
.rounded-element {
border-radius: 10px 20px;
}
.rounded-element {
border-radius: 10px 20px 30px 40px;
}Ebben a példában:
A .rounded-element osztály beállítja az elem border-radius értékét.
A lekerekítés mértékét az értékek beállításával szabályozhatod. Ha egyesével négy értéket adsz meg minden sarokhoz, egyedi sugarakat adhatsz meg minden sarokhoz, lehetővé téve, hogy összetettebb, lekerekített sarkú formákat hozz létre.
A border-radius tulajdonságot gyakran használják gombok, kártyák és egyéb UI elemek létrehozására, hogy lágyítsák a megjelenést és javítsák a weboldalak vizuális dizájnját.