Border Radius rafall

Rúnnaðu hvert horn með sleðum, búðu til lífræn form með eldingarlaga stillingu og afritaðu CSS-kóðann samstundis.

Forstillingar
Horn
Öll horn
24px
CSS
Dragðu sleðana til að rúnna hornin.

Hvert horn er teiknað beint í vafranum þínum. Engu af því sem þú stillir hér er hlaðið upp á BroBroGo.

Algengar spurningar

Hvernig virka hornin fjögur og px gagnvart %?

Sleðarnir fjórir stýra hornunum réttsælis: efst til vinstri, efst til hægri, neðst til hægri og neðst til vinstri. Í pixlum rúnnast hornið um fasta stærð; í prósentum rúnnast það í hlutfalli við rammann — lárétt prósenta fylgir breiddinni og lóðrétt prósenta fylgir hæðinni, þannig að 50% breytir ferningi í hring.

Hvað gerir eldingarlaga (elliptical) stillingin?

Þegar slökkt er á þessu er hvert horn fjórðungshringur með einum radíus. Þegar kveikt er á þessu fær hvert horn sérstakan láréttan og lóðréttan radíus, sem gerir þér kleift að búa til mjúk og lífræn form. Tólfskrifarinn sér um að skrifa gildin tvö með skástriki fyrir þig og fer aftur í stutta formið þegar hornin verða hringlaga á ný.

Hvernig bý ég til fullkominn hring eða aflangan hnapp?

Tengdu hornin saman, skiptu yfir í prósentur og stilltu á 50%: ferningur verður að hring. Fyrir aflangan hnapp skaltu halda þig við pixla og draga horn fram yfir helming hæðar hnappsins — hliðarnar haldast fullkomlega rúnnaðar óháð breidd. Forstillingin „Hringur“ græjar fyrra dæmið með einum smelli.

CSS Cubic Bezier rafallDragðu handföngin tvö til að móta hreyfisveigju, fylgstu með punktinum hreyfast og afritaðu cubic-bezier() gildið.Box Shadow rafallDragðu sleða til að móta box-shadow, raðaðu lögum til að skapa dýpt og afritaðu tilbúið CSS samstundis.Litagradíent rafallBúðu til línulegan, hringlaga eða keilulaga stigul, bættu við litastoppum, stilltu stefnuna og afritaðu CSS-kóðann með einum smelli.Flexbox rafallSettu upp flex-gám og einingar hans með myndrænum stýringum, sjáðu breytingarnar í rauntíma og afritaðu CSS-kóðann með einum smelli.CSS Grid rafallStilltu dálka og raðir, dragðu yfir reitina til að staðsetja einingar og afritaðu grid-CSS ásamt samsvarandi HTML með einum smelli.CSS clamp() reiknivélSláðu inn stærð fyrir litla og stóra skjái og fáðu flæðandi clamp() gildi sem breytist mjúklega á milli — fyrir leturstærðir, spássíur eða bil.LitabreytirBreyttu litum á milli HEX, RGB, HSL, HSV, CMYK og LAB — breyttu hvaða reit sem er og hinir uppfærast jafnharðan.