Tạo CSS Border Radius miễn phí

Cách hoạt động

Công cụ tạo border-radius chạy hoàn toàn trong trình duyệt — không máy chủ, không thư viện và không tải lên. Nó tạo chuỗi giá trị CSS border-radius trực tiếp bằng JavaScript với React state và useMemo, rồi áp dụng làm style nội tuyến cho một phần tử div trực tiếp để chính bộ máy CSS của trình duyệt hiển thị hình dạng theo thời gian thực.

1. 1
   Thanh trượt ghi vào state

   Mỗi ô nhập dạng thanh trượt ghi vào một trong tám biến state dạng số — bốn bán kính góc ngang và bốn bán kính dọc cho chế độ elip. Chế độ thống nhất gộp cả tám thành một thanh trượt qua hàm trợ giúp setAll đồng bộ mọi giá trị cùng lúc.
2. 2
   useMemo tạo giá trị CSS

   Hook useMemo tính lại chuỗi border-radius mỗi khi giá trị góc, đơn vị (px hoặc %) hoặc tùy chọn elip thay đổi. Ở chế độ chuẩn, nó tạo dạng viết tắt bốn giá trị; khi bật elip, nó thêm dấu gạch chéo phân cách cho cú pháp đầy đủ tám giá trị — ví dụ 32px 20px 20px 32px / 20px 32px 20px 32px.
3. 3
   Bộ máy CSS của trình duyệt hiển thị bản xem trước

   Chuỗi đã tính được đặt làm style borderRadius nội tuyến trên một phần tử div thường. Bộ máy bố cục của trình duyệt đảm nhận toàn bộ việc hiển thị — không có canvas, không SVG và không mã vẽ bên thứ ba.
4. 4
   Clipboard API sao chép đầu ra

   Nhấp Sao chép sẽ gọi navigator.clipboard.writeText với khai báo CSS (border-radius: ...;) hoặc lớp giá trị tùy ý tương đương của Tailwind (rounded-[...]), tùy theo định dạng đã chọn.

Công cụ liên quan