ຂ້າມໄປຫາເນື້ອຫາຫຼັກ
LibraTool logoLibraTool

ຕົວສ້າງ CSS Border Radius ຟຣີ

ອອກແບບ rounded corner ດ້ວຍ visual ພ້ອມຄວບຄຸມແຕ່ລະມູມ. ຮອງຮັບ syntax X/Y elliptical ສຳລັບຮູບ blob organic.

ເຮັດວຽກແບບອອບໄລນ໌ໄດ້ຫຼັງໂຫຼດແລ້ວ
border-radius: 20px 20px 20px 20px;
ຫົວໜ່ວຍ

ການນຳໃຊ້ທົ່ວໄປ

  • ຮູບຊົງ Blob ທໍາມະຊາດໃຊ້ຄໍາສັ້ນ elliptical X/Y ເພື່ອສ້າງຮູບຊົງ blob ທີ່ເປັນເອກະລັກສໍາລັບພາກ hero ແລະ ຮູບວາດ.
  • ມູມກະດານ ແລະ ກະບະກັກມູມມົນສໍາລັບກະດານ, ກະບະ ແລະ ກະດານຕາມະະກໍາໃນການອອກແບບ UI ທີ່ທັນສະໄໝ.
  • Avatar ແລະ ຮູບກົ່ວສະໝາດສ້າງລະດັບມູມທີ່ຖືກຕ້ອງສໍາລັບຮູບກົ່ວ: ກົ່ວ, squircle ຫຼື rounded ສີ່ຫຼ່ຽມ.
  • Pills, Tags ແລະ Badgesສະ້າງປຸ່ມ pill ທີ່ມົນ, tag ແລະ badges ສົມບູນດ້ວຍ preset 9999.
  • ທີ່ອອກແບບມູມສະວະທາຜສົມ radii ໂດຍທົ່ວມູມເພື່ອສ້າງກະດານ ແລະ ປຸ່ມ asymptotic ທີ່ຖືກຮັບຮູ້ຍີ່ຫໍ້.

ມັນເຮັດວຽກແນວໃດ

ຕົວສ້າງ border-radius ເຮັດວຽກທັງໝົດຢູ່ໃນບຣາວເຊີ — ບໍ່ມີເຊີບເວີ, ບໍ່ມີໄລບຣາຣີ, ບໍ່ມີການອັບໂຫຼດ. ມັນສ້າງສະຕຣິງຄ່າ CSS border-radius ໂດຍກົງໃນ JavaScript ໂດຍໃຊ້ React state ແລະ useMemo, ແລ້ວນຳໃຊ້ມັນເປັນ inline style ເທິງອົງປະກອບ div ທີ່ມີຊີວິດຊີວາເພື່ອໃຫ້ເອັນຈິນ CSS ຂອງບຣາວເຊີເອງສະແດງຜົນຮູບຮ່າງໃນເວລາຈິງ.

  1. 1
    ແຖບເລື່ອນຂຽນ state
    ຂໍ້ມູນເຂົ້າຂອບເຂດແຕ່ລະອັນຂຽນເຂົ້າໜຶ່ງໃນແປດຕົວແປ state ຕົວເລກ — ລັດສະໝີມູມແນວນອນສີ່ອັນ ແລະ ແນວຕັ້ງສີ່ອັນສຳລັບໂໝດຮູບໄຂ່. ໂໝດເອກະພາບຫຍໍ້ທັງແປດເຂົ້າກັນເປັນແຖບເລື່ອນດຽວຜ່ານຕົວຊ່ວຍ setAll ທີ່ຊິງໂຄຣໄນທຸກຄ່າພ້ອມກັນ.
  2. 2
    useMemo ປະກອບຄ່າ CSS
    useMemo hook ຄິດໄລ່ສະຕຣິງ border-radius ຄືນທຸກຄັ້ງທີ່ຄ່າມູມ, ໜ່ວຍ (px ຫຼື %), ຫຼືສະຫຼັບຮູບໄຂ່ປ່ຽນແປງ. ໃນໂໝດມາດຕະຖານມັນຜະລິດຮູບແບບຫຍໍ້ສີ່ຄ່າ; ດ້ວຍຮູບໄຂ່ເປີດ, ມັນເພີ່ມຕົວແບ່ງ slash ສຳລັບໄວຍາກອນແປດຄ່າເຕັມ — ຕົວຢ່າງ 32px 20px 20px 32px / 20px 32px 20px 32px.
  3. 3
    ເອັນຈິນ CSS ຂອງບຣາວເຊີສະແດງຜົນຕົວຢ່າງ
    ສະຕຣິງທີ່ຄິດໄລ່ຖືກຕັ້ງເປັນ style borderRadius inline ເທິງອົງປະກອບ div ທຳມະດາ. ເອັນຈິນ layout ຂອງບຣາວເຊີເຮັດການສະແດງຜົນທັງໝົດ — ບໍ່ມີ canvas, ບໍ່ມີ SVG, ແລະ ບໍ່ມີໂຄ້ດແຕ້ມພາຍນອກ.
  4. 4
    Clipboard API ສຳເນົາຜົນອອກ
    ການກົດ ສຳເນົາ ເອີ້ນ navigator.clipboard.writeText ພ້ອມການປະກາດ CSS (border-radius: ...;) ຫຼືຄລາສ Tailwind arbitrary-value ທີ່ກົງກັນ (rounded-[...]), ຂຶ້ນກັບການສະຫຼັບຮູບແບບທີ່ເລືອກ.

ເຄື່ອງມືທີ່ກ່ຽວຂ້ອງ

🎨

ຕົວສ້າງ CSS Box Shadow

ສ້າງ CSS box-shadow ດ້ວຍ visual builder ພ້ອມຕົວຢ່າງ live, ຊັ້ນຫຼາຍ, color picker, inset toggle ແລະ ຄັດລອກດ່ວນ. ລວມ preset Material, neumorphism ແລະ glow.

ລອງໃຊ້
🟦

ເຄື່ອງກໍາເນີດ CSS Grid

ອອກແບບ CSS grid ທາງພາບ — ຕາມຮອຍ, ຫົວໜ່ວຍ ແລະ ຊ່ອງວ່າງ — ແລະ ສຳເນົາ CSS ໄປມາ ແລະ HTML.

ລອງໃຊ້
↔️

ເຄື່ອງກໍາເນີດ CSS Flexbox

ທົດລອງເອົາທິດທາງ flex, ກອບ, justify ແລະ align ເທິງລາຍການກ່ວາວ — ແລະ ສຳເນົາ CSS.

ລອງໃຊ້

ຄໍາຖາມທີ່ຖາມເລື້ອຍໆ