Border Radius Generator

Hvað er þetta verkfæri?

border-radius er CSS eiginleikinn sem rúnnar horn stökshluta. Þegar hann er skrifaður í höndunum tekur hann fjögur gildi í fastri röð — efst til vinstri, efst til hægri, neðst til hægri, neðst til vinstri — sem er auðvelt að rugla saman, sérstaklega þegar hornin fjögur eru ólík.

Þetta verkfæri fjarlægir alla ágiskun: færðu sleða, fylgstu með horninu rúnnast í rauntíma forskoðun og lestu nákvæman CSS kóðann úr kóðakassanum sem myndast. Einn læsingarhnappur skiptir á milli samræmds radíuss (öll fjögur hornin eins, algengasta tilfellið) og fjögurra sjálfstæðra sleða fyrir lífræn, ósamhverf form.

Af hverju að nota það?

• Forskoðunin í rauntíma uppfærist samstundis meðan þú dregur — engin þörf á að breyta CSS og endurhlaða til að sjá útkomuna.
• Ein smellslæsing fyrir algenga tilfellið 'sami radíus á öllum hornum'; opnaðu fyrir pillulaga hnappa, talblöðrur og blob-form.
• Skilar styttri einnar-gildis útgáfunni þegar öll hornin passa saman, eða fullri fjögurra-gilda útgáfu þegar þau gera það ekki — tilbúið til að afrita og líma í báðum tilvikum.
• Keyrir alfarið í vafranum þínum. Ekkert sem þú slærð inn er sent neitt.
• Ókeypis, engin skráning, virkar á farsímum.

Hvernig á að nota það

1. Láttu 'læsa öllum hornum' vera hakað við og dragðu hvaða sleða sem er til að stilla samræmdan radíus fyrir allan kassann.
2. Afhakaðu læsinguna til að stjórna hverju horni sjálfstætt — gagnlegt fyrir pillulaga form, tárform og ósamhverf spjöld.
3. Fylgstu með forskoðunarkassanum uppfærast í rauntíma þegar þú stillir hvern sleða.
4. Afritaðu CSS kóðann sem myndast úr kóðakassanum og límdu hann í stílblaðið þitt.

Dæmi

Inntak

Efst til vinstri: 40px, Efst til hægri: 8px, Neðst til hægri: 40px, Neðst til vinstri: 8px

Úttak

border-radius: 40px 8px 40px 8px;

Ósamhverf gagnstæð horn eins og þessi skapa lauf- eða krónublaðslögun — algeng áhrif í hönnun spjalda og merkja.

px eða % — hvaða einingu ætti ég að nota?

Þessi rafall skilar pixlagildum, sem er rétt sjálfgefið val fyrir flesta viðmótsvinnu: hnappa, spjöld og innsláttarreiti þar sem þú vilt fastan, fyrirsjáanlegan hornaradíus óháð stærð stökshlutans.

Prósentur hegða sér öðruvísi — þær eru hlutfallslegar við breidd og hæð stökshlutans sjálfs, þannig að 50% radíus á ferningslaga hlut myndar fullkominn hring, en á hlut sem er ekki ferningslaga myndar hann sporbaug. Ef þú vilt þessi áhrif (mynd af notanda, blob-form sem stækkar með ílátinu), taktu CSS kóðann sem myndast og skiptu px gildunum út fyrir % gildi í höndunum — til dæmis breytir border-radius: 50% hvaða ferningslaga kassa sem er í hring.

Algeng border-radius mynstur

• Kringlótt spjald: öll horn jöfn, u.þ.b. 8–16px fyrir viðmótseiningar.
• Pillulaga hnappur: stilltu radíusinn á helming af hæð stökshlutans (eða notaðu einfaldlega 9999px, sem takmarkast sjálfkrafa í fulla pillu óháð hæð).
• Kringlótt notandamynd: border-radius: 50% á ferningslaga hlut (jöfn breidd og hæð).
• Talblaðra: þrjú horn rúnnuð, eitt horn skarpt — stilltu þrjá sleða hátt og einn á 0.
• Lauf- / krónublaðslögun: gagnstæð horn passa saman, aðliggjandi horn eru ólík — t.d. efst til vinstri og neðst til hægri bæði stór, efst til hægri og neðst til vinstri bæði lítil.

Samsett með skugga

Kringlótt horn birtast sjaldan ein og sér — spjöld og hnappar þurfa yfirleitt líka smá skugga fyrir dýpt. Notaðu Box Shadow Generator til að stilla fallskugga og settu bæði CSS kóðabútana á sama stökshlutann.

→ Box Shadow Generator

Algengar spurningar