Jenereta ya Border Radius

Fanya kila pembe kuwa ya mduara kwa vitelezi, unda maumbo asilia ya blob kwa njia ya duaradufu, na unakili CSS papo hapo.

Vipimo vya Awali
Pembe
Pembe zote
24px
CSS
Buruta vitelezi ili kufanya pembe zako ziwe za mduara.

Kila pembe inachorwa moja kwa moja kwenye kivinjari chako. Hakuna unachoweka hapa kinachopakiwa kwenye BroBroGo.

Maswali Yanayoulizwa Sana

Je, pembe nne na tofauti kati ya px na % zinafanya kazi vipi?

Vitelezi vinne vinaendana, kuelekea upande wa saa, na pembe za juu-kushoto, juu-kulia, chini-kulia na chini-kushoto. Katika pikseli, pembe inakuwa ya mduara kwa kiasi maalum; katika asilimia, inakuwa ya mduara kulingana na kisanduku — asilimia ya mlalo inafuata upana na asilimia ya wima inafuata urefu, hivyo 50% hugeuza mraba kuwa duara.

Njia ya duaradufu (elliptical mode) inafanya kazi gani?

Ikiwa imezimwa, kila pembe ni robo duara yenye rediasi moja. Ikiwashwa, kila pembe inapata rediasi tofauti ya mlalo na wima, ambayo ndiyo njia ya kuunda maumbo laini na asilia ya "blob". Jenereta hii inakuandikia mfumo wa alama ya mkwaju wa thamani mbili na kurudi kwenye mfumo mfupi mara tu pembe zinapokuwa za mduara tena.

Je, ninatengenezaje duara kamili au umbo la kidonge?

Unganisha pembe, badilisha hadi asilimia na uweke 50%: mraba unakuwa duara kamili. Kwa kitufe cha umbo la kidonge, baki na saizi ya pikseli badala yake na uburute pembe kupita nusu ya urefu wa kitufe — pande zitabaki na mduara kamili kwa upana wowote. Chaguo la awali la Duara (Circle) huweka hali ya kwanza kwa mbofyo mmoja tu.

Imeandikwa na kukaguliwa na timu ya wahariri wa BroBroGo.Ilisasishwa mwisho:

Jinsi ya Kutumia Jenereta ya Border Radius

Zana hii inakuwezesha kurekebisha mzunguko wa pembe za kisanduku kwa urahisi. Unaweza kudhibiti kila pembe kibinafsi au kuziunganisha pamoja, na kuchagua kati ya vipimo vya pikseli au asilimia. Pia, inatoa njia ya duaradufu (elliptical mode) ili kuunda maumbo laini na asilia zaidi kwa kuipa kila pembe rediasi tofauti za mlalo na wima. Zana hii inazalisha papo hapo msimbo wa CSS unaolingana na muundo wako.

Kila pembe inachorwa moja kwa moja kwenye kivinjari chako. Hakuna unachoweka hapa kinachopakiwa kwenye BroBroGo.

Vipengele vya Kuingiza Data (Inputs)

Ili kutengeneza umbo unalohitaji, zana hii inatumia vipengele vifuatavyo vya kudhibiti vipimo:

  • Vitelezi: Vinatumika kurekebisha mzunguko wa pembe. Vitelezi hivi vina kiwango cha kuanzia 0 hadi 100. Thamani ya awali ya kitelezi ni 24, ambayo inazalisha border-radius: 24px;.
    • Wakati pembe zimeunganishwa, kitelezi kimoja chenye lebo "Pembe zote" kinadhibiti pembe zote nne.
    • Wakati pembe hazijaunganishwa, kuna vitelezi vinne vinavyopatikana vyenye lebo "Juu kushoto", "Juu kulia", "Chini kulia", na "Chini kushoto".
    • Katika njia ya duaradufu, kila pembe inakuwa na vitelezi vya "Mlalo" na "Wima".
  • Kipimo: Kiteuzi hiki kinakuwezesha kubadili kati ya "px" (pikseli) na "%" (asilimia).
  • Unganisha pembe zote: Swichi ya kuunganisha au kutenganisha marekebisho ya pembe.
  • Pembe za duaradufu: Swichi ya kuwasha au kuzima njia ya duaradufu.
  • Vipimo vya Awali: Vifungo vilivyo na lebo "Yenye Ncha", "Yenye Mduara", "Duara", "Blob", na "Jani".

Matokeo ya Zana (Outputs)

Baada ya kurekebisha vitelezi, zana inatoa matokeo yafuatayo:

  • Uhakiki wa Visual: Onyesho la picha la kisanduku likiwa na mzunguko wa pembe uliowekwa.
  • CSS: Msimbo wa CSS unaozalishwa unaonyeshwa chini ya kichwa cha habari "CSS".
  • Nakili CSS: Kitufe cha kunakili msimbo wa CSS uliotengenezwa kwa urahisi.

Sheria za Utendaji na Mifumo ya CSS

Vitelezi vinne vya pembe vinafanya kazi kwa kufuata mwelekeo wa saa kuanzia juu-kushoto, juu-kulia, chini-kulia, hadi chini-kushoto.

Kuna tofauti kubwa ya jinsi vipimo vya pikseli na asilimia vinavyofanya kazi:

  1. Katika kipimo cha pikseli (px): Pembe inakuwa ya mduara kwa kiasi maalum kisichobadilika.
  2. Katika kipimo cha asilimia (%): Pembe inakuwa ya mduara kulingana na vipimo vya kisanduku chenyewe. Asilimia ya mlalo inafuata upana wa kisanduku na asilimia ya wima inafuata urefu wa kisanduku.

Wakati njia ya duaradufu ikiwa imezimwa, kila pembe inakuwa ni robo duara yenye rediasi moja tu. Njia hii inapowashwa, kila pembe inapata rediasi tofauti ya mlalo na wima. Hali hii inafanya jenereta kuandika mfumo wa alama ya mkwaju wa thamani mbili katika CSS (kwa mfano, border-radius: 10px / 20px;) na kurudi kwenye mfumo mfupi wa kawaida mara tu pembe zinapokuwa za mduara wa kawaida tena.

Mbinu za Kutengeneza Maumbo Maalum

Zana hii inarahisisha uundaji wa maumbo maalum kwa kutumia sheria maalum za CSS:

  • Duara Kamili: Ili kutengeneza duara kamili kutoka kwenye kisanduku cha mraba, unganisha pembe zote, badilisha kipimo kuwa asilimia (%), na uweke thamani ya 50%. Chaguo la awali la "Duara" linaweka hali hii kiotomatiki kwa kuweka pembe zote kuwa 50%.
  • Umbo la Kidonge: Kwa ajili ya kutengeneza vitufe vya umbo la kidonge, baki na kipimo cha pikseli (px) na uburute kitelezi cha pembe kupita nusu ya urefu wa kitufe. Pande za kitufe zitabaki na mduara kamili hata kama upana wa kitufe utabadilika.
  • Maumbo ya Blob na Jani: Kwa kutumia njia ya duaradufu na kuchezea vitelezi vya mlalo na wima, unaweza kutengeneza maumbo asilia ya "blob" au kutumia chaguo la awali la "Jani" na "Blob" kupata maumbo hayo haraka.

Maswali Yanayoulizwa Mara kwa Mara (FAQ)

Je, pembe nne na tofauti kati ya px na % zinafanya kazi vipi?
Vitelezi vinne vinaendana, kuelekea upande wa saa, na pembe za juu-kushoto, juu-kulia, chini-kulia na chini-kushoto. Katika pikseli, pembe inakuwa ya mduara kwa kiasi maalum; katika asilimia, inakuwa ya mduara kulingana na kisanduku — asilimia ya mlalo inafuata upana na asilimia ya wima inafuata urefu, hivyo 50% hugeuza mraba kuwa duara.

Njia ya duaradufu (elliptical mode) inafanya kazi gani?
Ikiwa imezimwa, kila pembe ni robo duara yenye rediasi moja. Ikiwashwa, kila pembe inapata rediasi tofauti ya mlalo na wima, ambayo ndiyo njia ya kuunda maumbo laini na asilia ya "blob". Jenereta hii inakuandikia mfumo wa alama ya mkwaju wa thamani mbili na kurudi kwenye mfumo mfupi mara tu pembe zinapokuwa za mduara tena.

Je, ninatengenezaje duara kamili au umbo la kidonge?
Unganisha pembe, badilisha hadi asilimia na uweke 50%: mraba unakuwa duara kamili. Kwa kitufe cha umbo la kidonge, baki na saizi ya pikseli badala yake na uburute pembe kupita nusu ya urefu wa kitufe — pande zitabaki na mduara kamili kwa upana wowote. Chaguo la awali na Duara huweka hali ya kwanza kwa mbofyo mmoja tu.

Jenereta ya CSS Cubic BezierBuruta mishiko miwili ili kuunda mkondo wa easing, tazama nukta inavyosafiri kulingana na ile thabiti, na unakili thamani ya cubic-bezier().Jenereta ya Box ShadowBuruta vitelezi ili kuunda box-shadow, weka tabaka kwa kina zaidi, na unakili CSS iliyokamilika papo hapo.Jenereta ya GradientUnda gradient ya linear, radial, au conic, ongeza vituo vya rangi na uweke mwelekeo, kisha unakili CSS kwa mbofyo mmoja.Jenereta ya FlexboxWeka chombo cha flex na vipengele vyake kwa vidhibiti vya macho, tazama mpangilio unavyobadilika moja kwa moja, na unakili CSS kwa mbofyo mmoja.Jenereta ya CSS GridWeka safuwima na safu mlalo zako, buruta kwenye seli ili kuweka vipengele, na unakili CSS ya gridi pamoja na HTML inayolingana kwa mbofyo mmoja.Kikokotoo cha CSS clamp()Ingiza saizi ya skrini ndogo na kubwa na upate thamani ya clamp() inayobadilika vizuri katikati yake — kwa ajili ya saizi za fonti, padding, margin au gap.Kigeuzi cha RangiBadilisha rangi kati ya HEX, RGB, HSL, HSV, CMYK na LAB — hariri sehemu yoyote na nyingine zitasasishwa unapoendelea.