រំលងទៅខ្លឹមសារមេ
LibraTool logoLibraTool

បង្កើតមុំស CSS ឥតគិតថ្លៃ

រចនា corner មូលដោយមើលឃើញ ជាមួយការគ្រប់គ្រងឯករាជ្យលើ corner នីមួយៗ។ គាំទ្រ syntax X/Y elliptical សម្រាប់រូបរាង blob organic។

ធ្វើការក្រៅបណ្តាញនៅពេលបានផ្ទុករួច
border-radius: 20px 20px 20px 20px;
ឯកតា

ការប្រើប្រាស់ទូទៅ

  • រូបរាង Blob ធម្មជាតិប្រើប្រាស់វាក្យប្រilde X/Y ដើម្បីបង្កើតរូបរាង blob ប្រលោះមួយសម្រាប់ផ្នែក hero និងរូបភាព។
  • ជ្រុងកាត និងកុងតឺន័រមុំរង្វង់ដែលទម្រង់សម្រាប់ក្រឡា កុងតេលនរ និង panel ក្នុងការរចនា UI ទំនើប។
  • រូបរាង Avatar និងរូបភាព Profileបង្កើតលក្ខណៈមុំក្ដាប់ត្រឹមត្រូវសម្រាប់រូបភាព profile៖ ឌង្ហើ squircle ឬ rounded square។
  • Pills Tags និង Badgesសាងសង់ pill ប៊ូតុង rounded ពេញលេញ tag និង badges ដែលមាន preset 9999។
  • ការរចនាមុំ Asymmetricល្បាយលាយ radii លើមុំដើម្បីបង្កើត distinctive ក្រឡា ឆ្ងាយនឹង រូបលាប់-សក្ដិសមស្ត។

វាដំណើរការដោយរបៀបណា

កម្មវិធីបង្កើតកាំកែងជ្រុងដំណើរការទាំងស្រុងនៅក្នុងកម្មវិធីរុករក — គ្មានម៉ាស៊ីនមេ គ្មានបណ្ណាល័យ និងគ្មានការផ្ទុកឡើងទេ។ វាបង្កើត string តម្លៃ CSS border-radius ដោយផ្ទាល់ជា JavaScript ដោយប្រើ React state និង useMemo រួចអនុវត្តវាជារចនាប័ទ្មក្នុងបន្ទាត់លើធាតុ div ផ្ទាល់ដូច្នេះម៉ាស៊ីន CSS ផ្ទាល់របស់កម្មវិធីរុករកបង្ហាញរូបរាងក្នុងពេលវេលាពិត។

  1. 1
    ឧបករណ៍រំកិលសរសេរស្ថានភាព
    ធាតុចូលជួរនីមួយៗសរសេរទៅអថេរស្ថានភាពលេខមួយក្នុងចំណោមប្រាំបី — កាំកែងជ្រុងផ្ដេកបួន និងបញ្ឈរបួនសម្រាប់របៀបព្រង់។ របៀបបញ្ចូលគ្នាបង្រួមទាំងប្រាំបីទៅជាឧបករណ៍រំកិលតែមួយតាមជំនួយការ setAll ដែលធ្វើសមកាលកម្មតម្លៃទាំងអស់ក្នុងពេលតែមួយ។
  2. 2
    useMemo ប្រកបតម្លៃ CSS
    hook useMemo គណនា string border-radius ឡើងវិញនៅពេលតម្លៃជ្រុងណាមួយ ឯកតា (px ឬ %) ឬការប្តូររបៀបព្រង់ផ្លាស់ប្តូរ។ នៅរបៀបស្តង់ដារវាបង្កើតកាត់ខ្លីតម្លៃបួន; ជាមួយព្រង់បើក វាបន្ថែមសញ្ញាបំបែកសញ្ញាដកសម្រាប់វាក្យសម្ព័ន្ធតម្លៃប្រាំបីពេញលេញ — ឧទាហរណ៍ 32px 20px 20px 32px / 20px 32px 20px 32px។
  3. 3
    ម៉ាស៊ីន CSS កម្មវិធីរុករកបង្ហាញការមើលជាមុន
    string ដែលបានគណនាត្រូវបានកំណត់ជារចនាប័ទ្ម borderRadius ក្នុងបន្ទាត់លើធាតុ div ធម្មតា។ ម៉ាស៊ីនប្លង់របស់កម្មវិធីរុករកធ្វើការបង្ហាញទាំងអស់ — គ្មាន canvas គ្មាន SVG និងគ្មានកូដគូរតតិយភាគីទេ។
  4. 4
    Clipboard API ចម្លងលទ្ធផល
    ការចុចចម្លងហៅ navigator.clipboard.writeText ជាមួយប្រកាស CSS (border-radius: ...;) ឬថ្នាក់តម្លៃបំពាន Tailwind ស្មើ (rounded-[...]) អាស្រ័យលើការប្តូរទម្រង់ដែលបានជ្រើសរើស។

ឧបករណ៍ពាក់ព័ន្ធ

🎨

បង្កើតស្រមោលប្រអប់ CSS

Visual builder សម្រាប់ CSS box-shadow ជាមួយការមើលជាមុនផ្ទាល់ ការ stack layer ច្រើន color picker ការ toggle inset និងចម្លងម្ដង។ រួមបញ្ចូល preset Material, neumorphism, និង glow។

សាកល្បង
🟦

ម៉ាស៊ីនបង្កើត CSS Grid

រចនា CSS grid ដោយមើលឃើញ — track ឯកតា និងគម្លាត — ហើយចម្លង CSS និង HTML ដែលបង្កើត។

សាកល្បង
↔️

ម៉ាស៊ីនបង្កើត CSS Flexbox

សាលកម្មចម្រើនលម្អិត flex direction, wrap, justify និង align ក្នុងលទ្ធផលក្នុងពេលវេលាផ្ទាល់ — ហើយចម្លងលេខកូដ CSS។

សាកល្បង

សំណួរដែលសួរជាញឹកញាប់