Jenereta ya CSS Border Radius

Zana zote

Tengeneza CSS border-radius kwa macho ukiwa na onyesho la moja kwa moja na nakili msimbo tayari kwa matumizi.

Onyesho la awali Buruta vishikio vya pembe
CSS
border-radius: —;

Faragha 100% — kila kitu hufanyika ndani ya kivinjari chako. Hakuna kinachopakiwa.

Pembe zote
px
px
Kipengele
Mipangilio tayari

Kuhusu Jenereta ya CSS Border Radius

Kitengenezaji cha CSS Border Radius kinaunda kila kitu kuanzia kadi zenye mviringo laini hadi maumbo ya asili kama mabuluu. Buruta vishikizo vya pembe moja kwa moja kwenye onyesho la awali, au weka kila pembe kwa nambari — ikiwa ni pamoja na sintaksia kamili ya thamani nane, ambapo kila pembe ina radii tofauti za mlalo na wima. Mhimili huo wa pili ndio unaofungua milango kwa mayai, majani, matone na mabuluu.

Kidhibiti cha kuunganisha pembe huweka pembe zote nne katika mfumo mmoja kwa mviringo wa kawaida wa usawa, wakati kuvitenganisha kunaacha kila pembe huru kwa maumbo yasiyo na usawa. Mifano kumi na mbili — rounded, pill, circle, squircle, mabuluu mawili, leaf, egg, arch, teardrop, petal na wave — huonyesha uwezo wa sifa hii, na kitufe cha kuchanganya bila mpangilio hutengeneza maumbo mapya ya asili bila kikomo.

Unaweza kubadilisha kipimo, kubadilisha rangi ya kipengele na kanvasi ili kulingana na muundo wako, na kunakili thamani halisi ya border-radius au kanuni kamili ya CSS. Chombo hiki ni cha upande wa kivinjari kwa asilimia 100 — hakuna kinachopakiwa.

Jinsi ya kutumia Jenereta ya CSS Border Radius

  1. Buruta vishikizo vya pembe kwenye onyesho la awali, au zima "Unganisha pembe zote" ili kuhariri kila pembe pekee.
  2. Weka radius ya mlalo na wima kwa kila pembe ili kupata maumbo ya asili kama mabuluu.
  3. Chagua kipimo chako na rekebisha rangi za kipengele na mandhari ili kuona muktadha halisi.
  4. Jaribu mifano — pill, squircle, buluu, leaf, teardrop na mengine — au bofya kuchanganya bila mpangilio.
  5. Nakili thamani ya border-radius au CSS kamili.

Maswali yanayoulizwa mara kwa mara

Thamani kabla ya mkato ni radii za mlalo za pembe nne; zile baada ya mkato ni radii za wima. Kufanya mihimili hiyo miwili itofautiane kwa kila pembe ndiko kunakogeuza sanduku la kawaida la mviringo kuwa yai, jani au buluu.

Kwa mduara, tumia kipengele cha mraba chenye border-radius: 50%. Kwa pill, ipe mstatili wowote radius ya angalau nusu ya urefu wake — mifano ya circle na pill huweka hivyo mara moja.

Ndiyo — border-radius hukata sanduku la kipengele, ikiwa ni pamoja na picha za mandhari, na overflow: hidden huongeza ukataji hadi kwenye maudhui ya watoto. Kutumia radius ya buluu kwenye kipengele cha img ni njia ya haraka ya kupata vinyago vya picha vya asili.

Ndiyo, border-radius huchanganya kwa ulaini kwa kutumia mabadiliko ya CSS wakati hali zote mbili zina vipimo vinavyolingana. Kutia mchoro wa mwendo kati ya thamani mbili za buluu wakati wa hover ni athari maarufu ya kubadilika kwa umbo la asili — tengeneza hali zote mbili hapa kisha uzibadilishe kwa mchoro wa mwendo.

Ndiyo, ni bure kabisa na cha faragha: kinafanya kazi kwenye kivinjari chako pekee, bila akaunti na bila data yoyote kutumwa mahali popote.
Shiriki hii
Zana Zinazohusiana
Kitengenezaji Sahihi ya Barua Pepe Buni sahihi ya barua pepe ya HTML yenye umbo la kitaalamu kutoka kwa templeti 30, ibinafsishe na uihifadhi. Bila Malipo
Ikoni hadi PNG Geuza Bootstrap Icons, Font Awesome na zaidi kuwa picha maalum za PNG — bure, ndani ya kivinjari chako. Bila Malipo
Kiunda Ikoni za Programu Unda seti kamili ya ikoni za programu iliyo tayari kwa duka kwa ajili ya App Store na Google Play — mandharinyuma bora ya gredienti, mesh na ruwaza, iliyoundwa kutoka nembo yako. Bila Malipo
Kitengeneza Favicon Tengeneza kifurushi kamili cha favicon kutoka kwa nembo, ikoni ya fonti au monogram — favicon.ico, PNG za kisasa, Apple touch icon, PWA icons, web manifest na kijisehemu cha HTML. Bila Malipo
Kizalishi cha CSS Box Shadow Tengeneza vivuli vya CSS box-shadow vilivyowekwa tabaka kwa kutumia vitelezi vya moja kwa moja vya umbali, ukungu, usambazaji, rangi, uwazi na inset — angalia muundo kwenye kipengele halisi na nakili CSS tayari kupachika papo hapo. Bila Malipo
Jenereta ya CSS Gradient Jenga gradient za CSS za mstari, radial na conic zenye vituo vingi vya rangi na nakili msimbo. Bila Malipo
Utafutaji maarufu
jenereta ya css border radius jenereta ya border radius jenereta ya border radius ya kupendeza jenereta ya pembe za mviringo za css zana ya border radius css mtandaoni jenereta ya border radius ya duaradufu jenereta ya umbo la donge la css zana ya kuonyesha border radius
Unahitaji msaada?
Umepata tatizo na zana hii? Tujulishe timu yetu.
Ripoti tatizo

Ongeza zana hii ya bure kwenye tovuti yako mwenyewe — nakili na ubandike msimbo ulio hapa chini.