Jinsi gani naweza kuzalisha radius ya mpaka wa CSS kwa kila pembe?

Zima Umoja (pembe zote sawa) na weka kitelezi cha kila pembe huku ukiangalia onyesho la awali. Chagua Kitengo, px au %, kisha bonyeza Nakili ili kupata tamko la border-radius.

Jinsi gani naweza kutengeneza umbo la mkumbe la kikaboni kwa CSS?

Washa Duaradufu (sintaksia ya X / Y) ili kuweka nusu vipenyo vya mlalo na wima kivyake kwa kila pembe, au bonyeza Mkumbe bila mpangilio. Matokeo yanatumia sintaksia ya kufyeka, kwa mfano 32px 20px 20px 32px / 20px 32px 20px 32px.

Je, nitumie px au asilimia kwa radius ya mpaka?

Tumia px kwa ukubwa wa pembe usiobadilika bila kujali ukubwa wa kisanduku. Tumia % kwa nusu vipenyo vinavyolingana na kipengele, kama vile 50% kwa duara kwenye mraba. Kidhibiti cha Kitengo kinabadilisha kati yao; vitelezi vinafikia 200 px au asilimia 100.

Je, ninaweza kunakili matokeo kama darasa la Tailwind?

Ndiyo. Badilisha muundo wa matokeo kuwa Tailwind ili kunakili darasa la thamani holela kama rounded-[...] badala ya tamko la CSS.

Je, ninaweza kujaribu radius kwenye ukubwa tofauti wa kisanduku?

Ndiyo. Vitelezi vya Upana na Urefu vinabadilisha ukubwa wa onyesho la awali kutoka 64 hadi 320 px, ili uweze kuangalia jinsi radius hiyo hiyo inavyoonekana kwenye vipengele vyembamba, vipana au virefu.

Ndiyo. Kila zana ni bure kutumia, bila akaunti na bila kadi ya mkopo. Kazi inafanyika kwenye kifaa chako badala ya seva zetu, jambo linaloiwezesha kuwa bure kutumika.

Je, inafanya kazi kwenye simu?

Ndiyo. Inafanya kazi kwenye vivinjari vya kisasa vya simu vya iOS na Android, bila kusakinisha chochote.

◖

Jenereta ya Radius ya Mpaka wa CSS bila malipo

Buni pembe za mviringo kwa kuona na udhibiti wa kujitegemea kwa kila pembe. Inasaidia sintaksia ya X/Y ya duaradufu kwa maumbo ya blob yanayoonekana ya asili.

Inafanya kazi kwenye kivinjari chakoHakuna usajili, hakuna madirisha ibukiziHakuna kuingia kinachohitajikaBure milele

Inafanya kazi bila mtandao mara ikishapakia

border-radius: 20px 20px 20px 20px;

Umoja (pembe zote sawa)Duaradufu (sintaksia ya X / Y)

Kitengo

Rangi:

Upana (192px)

Urefu (192px)

Kona zote (20px)

Matumizi ya kawaida

Maumbo ya Blob AsiliaTumia sintaksi ya elliptical X/Y ili kuunda maumbo ya blob ya kawaida kwa sehemu za hero na kielelezo.
Pembe za Kadi na KontenaPembe za kawaida zilizozungushwa kwa ajili ya kadi, kontena na paneli katika kubuni UI ya kisasa.
Avatar na Maumbo ya Picha ya WasifuKunga mtindo kamili wa pembe kwa picha za wasifu: ya duara, squircle, au sambamba iliyozungushwa.
Kapsuli, Lebo na Visibuti vya MaajabuKujenga kapsuli yenye visibuti vya zunguka kamili, lebo na visibuti vya maajabu na preset ya 9999.
Muundo wa Pembe ya AsymmetricChanganya radii katika pembe ili kuunda kadi na visibuti vya mtindo wa kawaida.

Jinsi Inavyofanya Kazi

Kitengenezea border-radius kinafanya kazi kikamilifu kwenye kivinjari — hakuna seva, hakuna maktaba, na hakuna upakiaji. Kinajenga mfuatano wa thamani ya CSS border-radius moja kwa moja kwa JavaScript kwa kutumia hali ya React na useMemo, kisha kuutumia kama mtindo wa ndani kwenye kipengele cha div hai ili injini ya CSS ya kivinjari chenyewe ionyeshe umbo papo hapo.

1
Vitelezi vinaandika hali
Kila uingizaji wa masafa unaandika kwenye moja ya vigezo nane vya nambari vya hali — radii nne za pembe mlalo na nne za wima kwa hali ya duaradufu. Hali iliyoungwa inapunguza vyote nane kuwa kitelezi kimoja kupitia kisaidizi cha setAll kinacholinganisha thamani zote kwa mara moja.
2
useMemo inajenga thamani ya CSS
Kiungo cha useMemo kinahesabu upya mfuatano wa border-radius wakati wowote thamani ya pembe, kipimo (px au %), au swichi ya duaradufu inabadilika. Katika hali ya kawaida kinatoa muundo mfupi wa thamani nne; ikiwa duaradufu imewashwa, kinaongeza mtenganishi wa slash kwa sintaksia kamili ya thamani nane — mfano 32px 20px 20px 32px / 20px 32px 20px 32px.
3
Injini ya CSS ya kivinjari inaonyesha onyesho la awali
Mfuatano uliohesabiwa unawekwa kama mtindo wa ndani wa borderRadius kwenye kipengele wazi cha div. Injini ya mpangilio ya kivinjari inafanya uonyeshaji wote — hakuna canvas, hakuna SVG, na hakuna msimbo wa uchoraji wa mtu wa tatu.
4
Clipboard API inanakili matokeo
Kubofya Nakili kunaita navigator.clipboard.writeText na aidha tamko la CSS (border-radius: ...;) au klasi sawa ya thamani-huru ya Tailwind (rounded-[...]), kutegemea swichi ya muundo iliyochaguliwa.

Zana Zinazohusiana

🎨

Jenereta ya Kivuli cha Sanduku la CSS

Mjenzi wa kuona kwa box-shadow ya CSS na mwonekano wa moja kwa moja, mrundikano wa tabaka nyingi, kichaguo cha rangi, kubadilisha inset, na kunakili kwa kubonyeza mara moja. Inajumuisha violezo vya Material, neumorphism, na mwanga.

Jaribu

🟦

Kitengenezea CSS Grid

Zungu CSS grid — tracks, vitengo na pengo — na kunakili CSS na HTML iliyozalishwa.

Jaribu

↔️

Kitengenezea CSS Flexbox

Jaribu mwelekeo wa kubana, songa, na justifikasi kwenye vitu vya moja kwa moja — na kunakili CSS.

Jaribu

Jenereta ya Radius ya Mpaka wa CSS bila malipo

Matumizi ya kawaida

Jinsi Inavyofanya Kazi

Zana Zinazohusiana

Jenereta ya Kivuli cha Sanduku la CSS

Kitengenezea CSS Grid

Kitengenezea CSS Flexbox

Maswali Yanayoulizwa Mara Kwa Mara