LibraTool logoLibraTool

Тавлидкунандаи гӯшаи гирди CSS-и ройгон

Гӯшаҳои гирдро бо назорати мустақил бар ҳар гӯша визуалӣ тарҳрезӣ кунед. Синтаксиси эллипсии X/Y-ро барои шаклҳои органикии blob дастгирӣ мекунад.

Ҳамин ки бор шуд офлайн кор мекунад
border-radius: 20px 20px 20px 20px;
Воҳид

Чӣ тавр он кор мекунад

Тавлидгари border-radius пурра дар браузер кор мекунад — на сервер, на китобхона, на боркунӣ. Он сатри қиммати CSS border-radius-ро бевосита дар JavaScript бо истифодаи ҳолати React ва useMemo месозад, сипас онро ҳамчун услуби inline дар элементи div-и зинда татбиқ мекунад, то муҳаррики худи CSS-и браузер шаклро дар вақти воқеӣ тасвир кунад.

  1. 1
    Лағжонакҳо ҳолатро менависанд
    Ҳар вуруди диапазон ба яке аз ҳашт тағйирёбандаи ҳолати рақамӣ менависад — чор радиуси кунҷи уфуқӣ ва чор амудӣ барои ҳолати эллипсӣ. Ҳолати ягона тамоми ҳаштро ба як лағжонак тавассути ёридиҳандаи setAll фурӯ мекунад, ки ҳар қимматро якбора ҳамоҳанг мекунад.
  2. 2
    useMemo қиммати CSS-ро ҷамъ меорад
    Крюки useMemo сатри border-radius-ро ҳар боре ки ягон қиммати кунҷ, воҳид (px ё %) ё иваз кунандаи эллипсӣ тағйир меёбад, аз нав ҳисоб мекунад. Дар ҳолати стандартӣ он мухтасари чорқимматиро тавлид мекунад; бо эллипсии фаъол, он ҷудокунандаи хатти каҷро барои синтаксиси пурраи ҳаштқиммата илова мекунад — масалан 32px 20px 20px 32px / 20px 32px 20px 32px.
  3. 3
    Муҳаррики CSS-и браузер пешнамоишро тасвир мекунад
    Сатри ҳисобшуда ҳамчун услуби inline-и borderRadius дар элементи оддии div гузошта мешавад. Муҳаррики намуди браузер тамоми тасвирро иҷро мекунад — на canvas, на SVG ва на рамзи тасвиркунии тарафи сеюм дахл дорад.
  4. 4
    API-и Clipboard натиҷаро нусхабардорӣ мекунад
    Зер кардани Нусхабардорӣ navigator.clipboard.writeText-ро бо эъломияи CSS (border-radius: ...;) ё синфи қиммати дилхоҳи Tailwind-и муодил (rounded-[...]), вобаста ба иваз кунандаи формати интихобшуда, даъват мекунад.

Абзорҳои марбут

🎨

Тавлидкунандаи сояи қутти CSS

Созандаи визуалии box-shadow-и CSS бо пешнамоиши зинда, дастабандии бисёрқабата, интихобгари ранг, тағйирдиҳандаи inset ва нусхабардории якклика. Пешбурдҳои Material, неоморфизм ва дурахшро дар бар мегирад.

Кӯшиш кунед
🟦

Тавлидгари шабакаи CSS

Шабакаи CSS-ро ба таври намоён тарҳрезӣ кунед — трекҳо, воҳидҳо ва фосилаҳо — ва CSS ва HTML тавлидшударо нусхабардорӣ кунед.

Кӯшиш кунед
↔️

Тавлидгари CSS Flexbox

Самт, печондан, ҷобаҷогузорӣ ва баробаркуниро дар унсурҳои зинда озмоед — ва CSS-ро нусхабардорӣ кунед.

Кӯшиш кунед

Саволҳои зуд-зуд додашаванда