Léim go dtí an príomhábhar
LibraTool logoLibraTool

Gineadóir Scáth Bosca CSS saor in aisce

Tógálaí amhairc le haghaidh box-shadow CSS le réamhamharc beo, cruachú il-shraitheanna, roghnaí datha, scoránú inmheánach, agus cóipeáil le haon chliceáil. Cuimsíonn réamhshocruithe Ábhair, neomuirfóis, agus lonraithe.

Oibríonn as líne nuair a lódáiltear é
Réamhamharc an chúlra

Tarraing an bosca chun scáth an tsraithe ghníomhach a shuíomhnú — coinnigh Shift síos le bainistíocht fhine

box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.15);

Réamhshocruithe

Úsáidí coitianta

  • Card UI ShadowsTóg scáthanna cárta deas do dhásanna, bhreac táirgí agus dhásanna.
  • Button Press EffectsTóg scáthanna cnaipe a shamhaltú doimhne dhomhain agus staid brú.
  • Neumorphism Soft UICruthaigh an chuma neumorphism UI-bhog le scáthanna péireáilte soilsithe + dorcha.
  • Modal & Popover ShadowsCruthaigh an mothú ardaithe, foluain le haghaidh comhbhidhir agus rollairí.
  • Glow & Focus Ring EffectsCruthaigh gealadh soilse, fáinní fócúsa, agus soilsithe stíl neon.

Conas a Oibríonn sé

Is uirlis React go hiomlán ar thaobh an chliaint í an gineadóir box-shadow — gan aon fhreastalaí, aon leabharlann. Coinníonn sí liosta réad sraithe scátha sa staid, cuireann sí teaghráin bhailí CSS box-shadow le chéile ar gach athrú ag baint úsáide as formáidire rgba() lámhscríofa, agus cuireann sí i bhfeidhm iad go díreach ar eilimint réamhamhairc trí airí stíle React ionas go dtarraingíonn inneall rindreála an bhrabhsálaí féin an toradh láithreach.

  1. 1
    Beathaíonn paraiméadair sraithe an formáidire
    Stórálann gach sraith scátha fritháirimh x/y, doiléiriú, leathadh, dath heics, agus luach teimhneachta. Ar gach athrú, tiontaíonn feidhm bheag shadowToCss an dath heics go comhpháirteanna RGB le slonn ionadaíochta, ansin cuireann sí an teaghrán rgba() le chéile — mar shampla, 0px 4px 12px 0px rgba(0, 0, 0, 0.15). Ceanglaítear sraitheanna iolracha le camóga.
  2. 2
    Rindreálann an brabhsálaí an réamhamharc beo
    Sanntar an teaghrán cóimeáilte don airí stíle boxShadow d'eilimint div go díreach i JSX. Nuashonraíonn React an tréith DOM, agus péinteálann inneall CSS an bhrabhsálaí an scáth láithreach — níl aon chanbhás ná WebGL i gceist, ach rindreáil CSS dúchasach amháin.
  3. 3
    Úsáideann tarraing-go-suíomh an API Pointer Events
    Glaonn cliceáil agus tarraingt an bhosca réamhamhairc ar setPointerCapture ar an eilimint, ansin rianaíonn sí deiltí onPointerMove chun fritháirimh x agus y na sraithe gníomhaí a nuashonrú i bhfíor-am. Cuireann coinneáil Shift fachtóir scála 0.25x i bhfeidhm le haghaidh suímh mhionchruinn.
  4. 4
    Cóipeáiltear an t-aschur chuig an ngearrthaisce
    Táirgeann an t-uirlis dhá fhormáid aschuir ó na sonraí sraithe céanna: dearbhú caighdeánach CSS box-shadow, agus aicme luacha treallach Tailwind (shadow-[...]) áit a gcuirtear folínte in ionad spásanna de réir rialacha comhréire Tailwind. Úsáideann cóipeáil aon chliceáil amháin navigator.clipboard.writeText.

Uirlisí Gaolmhara

◖

Gineadóir Ga Teorann CSS

Dearaigh coirnéil cruinnithe go hamhairc le rialú neamhspleách ar gach coirnéal. Tacaíonn le comhréir X/Y eilipseach le haghaidh cruthanna blob orgánacha.

Bain triail as
🟦

Giniúradh Ghréine CSS

Dearadh CSS gréine go radharcach — rianta, aonaid agus bhearna — agus cóipeáil an CSS agus HTML a ghintear.

Bain triail as
↔️

Giniúradh Flexbox CSS

Déan tástála ar threo flex, foluain, comhordú agus ailínithe ar mhíreanna beo — agus cóipeáil an CSS.

Bain triail as

Ceisteanna Coitianta