Giới thiệu về Trình tạo Border Radius
Công cụ này cho phép bạn điều chỉnh độ bo tròn các góc của một chiếc hộp. Bạn có thể kiểm soát từng góc riêng biệt hoặc liên kết chúng lại với nhau, đồng thời lựa chọn giữa đơn vị pixel hoặc phần trăm. Ngoài ra, công cụ còn cung cấp chế độ góc hình elip để tạo ra các hình dạng mềm mại, tự nhiên hơn bằng cách cung cấp cho mỗi góc các bán kính ngang và dọc riêng biệt. Trình tạo sẽ ngay lập tức hiển thị mã CSS tương ứng cho thiết kế của bạn.
Công cụ này rất hữu ích cho:
- Những ai muốn nhanh chóng bo tròn các góc của một chiếc hộp cho thiết kế web.
- Những ai cần tạo ra một hình tròn hoàn hảo từ một phần tử hình vuông.
- Những ai đang thiết kế nút bấm dạng hình viên thuốc.
- Những ai muốn tạo ra các hình dạng "giọt nước" mềm mại và tự nhiên cho thiết kế của mình.
- Những ai cần tạo mã CSS cho các góc bo tùy chỉnh.
Các tùy chọn điều khiển đầu vào
Để tùy chỉnh hình dạng của hộp, bạn có thể sử dụng các thanh trượt và nút chọn sau:
- Các thanh trượt: Dùng để điều chỉnh độ bo tròn của các góc. Các thanh trượt này có phạm vi giá trị từ 0 đến 100.
- Khi liên kết các góc, một thanh trượt duy nhất có nhãn Tất cả các góc sẽ điều khiển cả bốn góc cùng lúc.
- Khi hủy liên kết các góc, bạn sẽ có bốn thanh trượt riêng biệt tương ứng với Trên cùng bên trái, Trên cùng bên phải, Dưới cùng bên phải, và Dưới cùng bên trái.
- Trong chế độ góc hình elip, mỗi góc sẽ có thêm thanh trượt Ngang và Dọc riêng biệt.
- Đơn vị: Cho phép bạn chuyển đổi giữa hai đơn vị là "px" (pixel) và "%" (phần trăm).
- Liên kết tất cả các góc: Nút bật/tắt để liên kết hoặc hủy liên kết việc điều chỉnh các góc.
- Góc hình elip: Nút bật/tắt để kích hoạt hoặc vô hiệu hóa chế độ góc hình elip.
- Mẫu sẵn có: Các nút thiết lập nhanh bao gồm Góc nhọn, Bo tròn, Hình tròn, Hình giọt nước (Blob), và Hình chiếc lá.
Giá trị ban đầu của thanh trượt được đặt mặc định là 24, tạo ra đoạn mã border-radius: 24px;.
Kết quả đầu ra trực quan và mã CSS
Khi bạn điều chỉnh các thông số, công cụ sẽ cung cấp các kết quả đầu ra tức thì bao gồm:
- Khung xem trước: Hình ảnh trực quan hiển thị chiếc hộp được áp dụng các góc bo thực tế theo cấu hình của bạn.
- CSS: Đoạn mã CSS được tạo tự động và hiển thị ngay bên dưới tiêu đề CSS.
- Sao chép CSS: Nút bấm có nhãn Sao chép CSS giúp bạn nhanh chóng sao chép đoạn mã đã tạo vào bộ nhớ tạm.
Quy tắc hoạt động và các trường hợp đặc biệt
Khi sử dụng công cụ, bạn cần lưu ý một số quy tắc hoạt động và cách xử lý các góc bo như sau:
- Bốn thanh trượt điều chỉnh góc được ánh xạ theo chiều kim đồng hồ, bắt đầu từ góc trên cùng bên trái, đến trên cùng bên phải, dưới cùng bên phải, và cuối cùng là dưới cùng bên trái.
- Khi sử dụng đơn vị pixel (px), góc sẽ được bo tròn theo một lượng cố định.
- Khi sử dụng đơn vị phần trăm (%), góc sẽ được bo tròn tương đối so với kích thước của hộp; trong đó phần trăm theo chiều ngang sẽ tính theo chiều rộng của hộp, và phần trăm theo chiều dọc sẽ tính theo chiều cao của hộp.
- Nếu bạn đặt tất cả các góc ở mức 50% với đơn vị phần trăm, một chiếc hộp hình vuông sẽ được biến đổi thành một hình tròn hoàn hảo. Tùy chọn sẵn có Hình tròn sẽ tự động thiết lập tất cả các góc về mức 50% này.
- Khi tắt chế độ góc hình elip, mỗi góc sẽ là một phần tư hình tròn với một bán kính duy nhất.
- Khi bật chế độ góc hình elip, mỗi góc sẽ nhận một bán kính ngang và dọc riêng biệt. Lúc này, trình tạo sẽ viết mã CSS dưới dạng có dấu gạch chéo hai giá trị. Khi các góc trở lại dạng tròn đều, công cụ sẽ tự động quay về dạng viết rút gọn.
- Để tạo một nút bấm hình viên thuốc, hãy giữ nguyên đơn vị pixel (px) và kéo thanh trượt của một góc vượt quá một nửa chiều cao của nút; khi đó, các cạnh của nút sẽ luôn được bo tròn hoàn toàn ở bất kỳ chiều rộng nào.
Bảo mật và xử lý dữ liệu
Mọi góc bo tròn đều được xử lý trực tiếp trong trình duyệt của bạn. Không có dữ liệu nào bạn thiết lập được tải lên BroBroGo.
Câu hỏi thường gặp
Cách hoạt động của bốn góc và sự khác biệt giữa px và % là gì?
Bốn thanh trượt tương ứng theo chiều kim đồng hồ với các góc: trên-trái, trên-phải, dưới-phải và dưới-trái. Với đơn vị pixel (px), góc được bo tròn theo một lượng cố định; với đơn vị phần trăm (%), góc được bo tròn so với kích thước hộp — phần trăm ngang theo chiều rộng và phần trăm dọc theo chiều cao, do đó 50% sẽ biến hình vuông thành hình tròn.
Chế độ góc hình elip (elliptical mode) có tác dụng gì?
Khi tắt chế độ này, mỗi góc là một phần tư hình tròn với một bán kính duy nhất. Khi bật lên, mỗi góc sẽ có bán kính ngang và dọc riêng biệt, giúp bạn tạo ra các hình dạng "giọt nước" hoặc hữu cơ mềm mại. Trình tạo sẽ tự động viết mã dạng dấu gạch chéo hai giá trị cho bạn và quay lại dạng rút gọn khi các góc tròn đều trở lại.
Làm thế nào để tạo một hình tròn hoàn hảo hoặc hình viên thuốc?
Liên kết các góc lại, chuyển sang đơn vị phần trăm (%) và đặt giá trị 50%: một hình vuông sẽ biến thành hình tròn. Đối với nút dạng viên thuốc (pill), hãy giữ đơn vị pixel (px) và kéo một góc vượt quá một nửa chiều cao của nút — các cạnh sẽ luôn được bo tròn hoàn toàn ở mọi chiều rộng. Tùy chọn có sẵn "Hình tròn" sẽ thiết lập trường hợp đầu tiên chỉ với một cú nhấp chuột.