მთავარ შინაარსზე გადასვლა
LibraTool logoLibraTool

CSS Border Radius გენერატორი უფასოდ

ვიზუალურად დიზაინი გაუკეთეთ მომრგვალებულ კუთხეებს თითოეული კუთხის დამოუკიდებელი კონტროლით. მხარს უჭერს ელიფსური X/Y სინტაქსს ორგანული blob ფორმებისთვის.

მუშაობს ოფლაინ ჩატვირთვის შემდეგ
border-radius: 20px 20px 20px 20px;
ერთეული

გავრცელებული გამოყენება

  • ორგანული ღია ფორმებიგამოიყენეთ ელიფსური X/Y სინტაქსი უნიკალური ბლობ-ფორმების შესაქმნელად ჰირო-სექციებისა და ილუსტრაციებისთვის.
  • ბარათები და კონტეინერის კუთხეებისტანდარტული მომრგვალო კუთხეები ბარათებისთვის, კონტეინერებისა და პანელებისთვის თანამედროვე UI დიზაინში.
  • ავატარისა და პროფილის სურათის ფორმებიშექმენით სწორი კუთხის სტილი პროფილის სურათებისთვის: წრიული, squircle ან მომრგვალო კვადრატი.
  • აბი, ტეგები და ორდენიშექმენით სიდიდით სრულყოფილი მომრგვალო აბის ღილაკები, ტეგები და ორდენი 9999 წინასწარი დაყენებით.
  • ასიმეტრიული კუთხის დიზაინიშერეული რადიუსი კუთხეების მეტ დახმარებამდე სამი კუთხე, ღირდა-აღმოჩენილი ბარათი და ღილაკის ფორმები.

როგორ მუშაობს

border-radius გენერატორი მთლიანად ბრაუზერში მუშაობს — არც სერვერი, არც ბიბლიოთეკა, არც ატვირთვა არსებობს. ის აშენებს CSS border-radius მნიშვნელობის სტრიქონს პირდაპირ JavaScript-ში React-ის მდგომარეობისა და useMemo-ს გამოყენებით, შემდეგ მას ცოცხალი div ელემენტის inline სტილად იყენებს, ასე რომ ბრაუზერის საკუთარი CSS ძრავი ფორმას რეალურ დროში ხატავს.

  1. 1
    სლაიდერები წერენ მდგომარეობას
    თითოეული დიაპაზონის შეყვანა წერს რვა რიცხვითი მდგომარეობის ცვლადიდან ერთ-ერთს — ოთხი ჰორიზონტალური კუთხის რადიუსი და ოთხი ვერტიკალური ელიფსური რეჟიმისთვის. ერთიანი რეჟიმი ყველა რვას ერთ სლაიდერში აქცევს, setAll დამხმარის მეშვეობით, რომელიც ყოველ მნიშვნელობას ერთდროულად სინქრონიზებს.
  2. 2
    useMemo აწყობს CSS მნიშვნელობას
    useMemo hook ხელახლა ითვლის border-radius სტრიქონს, როცა ნებისმიერი კუთხის მნიშვნელობა, ერთეული (px ან %), ან ელიფსური გადამრთველი იცვლება. სტანდარტულ რეჟიმში ის ქმნის ოთხმნიშვნელოვან შემოკლებას; ელიფსური ჩართვისას, ის ამატებს ხაზის გამყოფს რვამნიშვნელოვანი სინტაქსისთვის — მაგ. 32px 20px 20px 32px / 20px 32px 20px 32px.
  3. 3
    ბრაუზერის CSS ძრავი რენდერს გადახედვას
    გამოთვლილი სტრიქონი ინიშნება, როგორც inline borderRadius სტილი უბრალო div ელემენტზე. ბრაუზერის განლაგების ძრავი ატარებს მთელ რენდერს — canvas, SVG ან მესამე-მხარის ხატვის კოდი არ არსებობს.
  4. 4
    Clipboard API აკოპირებს გამომავალს
    „კოპირებაზე“ დაწკაპუნება იძახებს navigator.clipboard.writeText-ს, ან CSS დეკლარაციით (border-radius: ...;) ან ეკვივალენტური Tailwind თვითნებური-მნიშვნელობის კლასით (rounded-[...]), არჩეული ფორმატის გადამრთველის მიხედვით.

დაკავშირებული ინსტრუმენტები

🎨

CSS Box Shadow გენერატორი

ვიზუალური ინსტრუმენტი CSS box-shadow-ის შესაქმნელად პირდაპირი გადახედვით, მრავალ-ფენიანი დაწყობით, ფერის ამომრჩეველით, inset გადართვით და ერთი დაჭერის კოპირებით. მოიცავს Material, neumorphism და glow წინასწარ დაყენებებს.

სცადე
🟦

CSS Grid შემქმნელი

ვიზუალურად დაამუშავეთ CSS grid — ტრეკები, ერთეულები და უფსები — და დააკოპიეთ გენერირებული CSS და HTML.

სცადე
↔️

CSS Flexbox შემქმნელი

აკეთეთ ექსპერიმენტი flex მიმართულებით, მოტეხვით, justify და align ცოცხლი ელემენტებით — და დააკოპიეთ CSS.

სცადე

ხშირად დასმული კითხვები