Trình tạo CSS Border-Radius

Trình tạo CSS Border-Radius là gì?

Trình tạo CSS Border-Radius là một trình chỉnh sửa trực quan miễn phí cho thuộc tính CSS border-radius, được tạo cho các nhà phát triển front-end và nhà thiết kế. Dùng thanh trượt phạm vi và ô nhập số để đặt bán kính ngang và dọc của mỗi góc theo pixel, chọn một đơn vị, và bật chế độ elip để có cú pháp dấu gạch chéo cho các góc bầu dục. Một hộp xem trước trực tiếp hiển thị hình dạng bo tròn theo thời gian thực, và khai báo rút gọn gọn nhẹ được tạo để bạn sao chép. Chọn một thiết lập sẵn như Bo tròn, Viên thuốc, Hình tròn hoặc Blob hữu cơ từ điều khiển phân đoạn để bắt đầu nhanh, rồi tinh chỉnh bất kỳ góc nào. Dùng nó để thiết kế thẻ mềm mại, nút viên thuốc, hình tròn hoàn hảo, squircle và các hình trang trí dạng giọt mà không cần ghi nhớ thứ tự góc.

Cách sử dụng Trình tạo CSS Border-Radius

1. Chọn một thiết lập sẵn (Bo tròn, Viên thuốc, Hình tròn hoặc Blob) từ điều khiển phân đoạn để tải hình dạng khởi đầu.
2. Kéo thanh trượt phạm vi của mỗi góc hoặc nhập một số để đặt bán kính ngang cho góc đó.
3. Bật Elip để hiện bán kính dọc thứ hai cho mỗi góc và tạo các góc bầu dục với cú pháp dấu gạch chéo.
4. Chọn đơn vị (px hoặc %) trong cài đặt; phần trăm sẽ co giãn bán kính theo kích thước hộp.
5. Quan sát bản xem trước trực tiếp cập nhật, rồi sao chép border-radius rút gọn được tạo vào bảng định kiểu của bạn.

Ví dụ

Cả bốn góc 16, elip tắt

border-radius: 16px;

Thiết lập Viên thuốc, mọi góc 9999

border-radius: 9999px;

TT 40/20, TP 10, DP 40/20, DT 10, elip bật

border-radius: 40px 10px 40px 10px / 20px 10px 20px 10px;

Câu hỏi thường gặp

Bốn góc theo thứ tự nào?

Dạng rút gọn liệt kê các góc theo chiều kim đồng hồ bắt đầu từ trên trái: trên trái, trên phải, dưới phải, dưới trái. Công cụ này luôn xuất cả bốn giá trị theo thứ tự đó, nên kết quả rõ ràng và dễ chỉnh tay về sau.

Chế độ elip làm gì?

Border-radius có thể nhận một bán kính ngang và một bán kính dọc cho mỗi góc, phân tách bằng dấu gạch chéo, để vẽ các góc bầu dục (elip) thay vì tròn. Bật Elip để đặt một bán kính dọc thứ hai cho mỗi góc; đầu ra khi đó dùng cú pháp dấu gạch chéo 'ngang / dọc'.

Tôi nên dùng px hay phần trăm?

Pixel cho kích thước góc cố định, bất kể hộp. Phần trăm tương đối với chiều rộng và chiều cao của hộp, nên 50% ở mỗi góc biến một hình vuông thành hình tròn hoàn hảo và độ bo tròn co giãn khi phần tử thay đổi kích thước. Đổi đơn vị trong cài đặt.

Làm sao tạo hình tròn hoàn hảo hoặc viên thuốc?

Chọn thiết lập Hình tròn (50% ở mỗi góc) để tạo hình tròn từ hình vuông, hoặc thiết lập Viên thuốc (bán kính pixel rất lớn) để các cạnh ngắn trở thành nửa hình tròn đầy đủ. Bạn cũng có thể bắt đầu từ một thiết lập sẵn rồi tinh chỉnh từng góc.

Dữ liệu của tôi có được tải lên đâu không?

Không. Trình tạo chạy hoàn toàn trong trình duyệt của bạn bằng JavaScript — các giá trị bán kính của bạn không bao giờ được gửi đến máy chủ, nên nó hoạt động riêng tư và thậm chí ngoại tuyến sau khi trang đã tải.