border-radius: 50px;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.
Nyelv kiválasztása
Téma beállítása
© 2024 ReadyTools. Minden jog fenntartva.