Үндсэн агуулга руу очих
LibraTool logoLibraTool

CSS булангийн радиусын үүсгэгч — үнэгүй

Булан бүрийн бие даасан хяналттайгаар дугуй булануудыг харааны байдлаар зохион бүтээх. Органик блоб хэлбэрт зориулсан эллипсийн X/Y синтаксийг дэмждэг.

Ачаалагдсаны дараа офлайн ажилладаг
border-radius: 20px 20px 20px 20px;
Нэгж

Түгээмэл хэрэглээ

  • Органик Бөмбөлөг ХэлбэрЭлипс X/Y синтаксийг ашиглан зөөлөн хэсэг, зураг илэрхийллийн өвөрмөц бөмбөлөг хэлбэр үүсгэх.
  • Карт ба Контейнер БулангуудСучасны UI дизайнд картууд, контейнерүүд, хавтан төлөв.
  • Аватар ба Профайл Зураг ХэлбэрПрофайл зургийн булан хэв маяг үүсгэх: дугуй, squircle, эсвэл округа талбай.
  • Pills, Tags ба Badges9999 урьдаачлалтай төгөлдөр округа pill товчлуур, tags ба badges үүсгэх.
  • Асимметр Булангийн ДизайнуудБулангийнхаа дээр radii сольж брэнд-таных картууд ба товчлуур үүсгэх.

Хэрхэн ажилладаг

border-radius үүсгэгч бүхэлдээ хөтчид ажилладаг — сервер, номын сан, байршуулалт хамааралгүй. Энэ нь React state, useMemo ашиглан CSS border-radius утгын мөрийг шууд JavaScript-д бүтээж, дараа нь амьд div элемент дээр inline style болгон хэрэглэдэг тул хөтчийн өөрийн CSS систем хэлбэрийг бодит цагт зурдаг.

  1. 1
    Гулсуурууд state бичдэг
    Range оролт бүр найман тоон state хувьсагчийн нэгэнд бичдэг — эллипс горимд дөрвөн хэвтээ өнцгийн радиус, дөрвөн босоо радиус. Нэгдсэн горим бүх найманыг setAll туслагчаар бүх утгыг нэг зэрэг синхрончилдог нэг гулсуур руу нэгтгэдэг.
  2. 2
    useMemo CSS утгыг угсардаг
    useMemo hook нь ямар ч булангийн утга, нэгж (px эсвэл %), эсвэл эллипс сэлгэц өөрчлөгдөх бүрт border-radius мөрийг дахин тооцоолдог. Стандарт горимд энэ нь дөрвөн-утгын товчлол гаргадаг; эллипс асаалттай үед бүтэн найман-утгын синтаксд slash тусгаарлагч нэмдэг — жишээ нь 32px 20px 20px 32px / 20px 32px 20px 32px.
  3. 3
    Хөтчийн CSS систем урьдчилан харах зурдаг
    Тооцоологдсон мөр энгийн div элемент дээр inline borderRadius style болгон тохируулагддаг. Хөтчийн бүдүүвч систем бүх зурлагыг хийдэг — canvas, SVG, гуравдагч талын зурах код хамааралгүй.
  4. 4
    Clipboard API гаралтыг хуулдаг
    Copy дарах нь сонгосон форматын сэлгэцээс хамааран CSS declaration (border-radius: ...;) эсвэл ижил утгатай Tailwind дурын-утгын класс (rounded-[...])-той navigator.clipboard.writeText-г дуудна.

Холбоотой хэрэгслүүд

🎨

CSS хайрцгийн сүүдрийн үүсгэгч

Шууд урьдчилан харалт, олон давхаргын дамжуулалт, өнгө сонгогч, дотор тохируулах болон нэг товшилтоор хуулах бүхий CSS хайрцгийн сүүдэр барихад зориулсан харааны барилгач. Material, ноеморфизм болон гялбааны урьдчилан тохируулгуудыг агуулна.

Туршиж үзэх
🟦

CSS торны үүсгэгч

CSS торыг нүдээр загварчил — мөр, баганын нэгж болон зай — мөн үүссэн CSS ба HTML-ийг хуул.

Туршиж үзэх
↔️

CSS flexbox үйлдвэрлэгч

Flex чиглэл, wrap, justify болон align-ийг амьд элементүүд дээр туршиж — мөн CSS-ийг хуул.

Туршиж үзэх

Түгээмэл асуултууд