Những điểm chính
- 01Ba chế độ — đồng nhất, từng góc và elliptical — bao gồm tất cả từ nút tròn đơn giản đến hình blob hữu cơ.
- 02Hỗ trợ các đơn vị px, %, và rem, mỗi đơn vị có hành vi tỷ lệ khác nhau.
- 03Chế độ elliptical hiển thị bán kính ngang và dọc riêng biệt trên mỗi góc cho cú pháp border-radius đầy đủ của CSS.
- 04Xem trước trực tiếp sử dụng thuộc tính CSS thực tế, vì vậy những gì bạn thấy chính xác là những gì trình duyệt của bạn sẽ hiển thị.
Từ Các Góc Tròn Đơn Giản Đến Các Hình Blob Hữu Cơ
Giá trị border-radius bốn góc dễ nhập từ bộ nhớ — border-radius: 8px. Nhưng khi bạn cần bán kính khác nhau trên mỗi góc, hoặc bạn muốn cú pháp elliptical CSS cho các hình dạng hữu cơ, shorthand trở nên khó hiểu nhanh chóng. Dạng đầy đủ là top-left-x top-right-x bottom-right-x bottom-left-x / top-left-y top-right-y bottom-right-y bottom-left-y — tám giá trị theo một thứ tự cụ thể.
Bộ tạo border-radius của Handytool cho phép bạn kéo thanh trượt cho mỗi góc ở bất kỳ chế độ nào và xem hình dạng cập nhật trực tiếp. Chuyển đổi giữa px, %, và rem mà không cần tính toán lại, và sao chép khai báo CSS shorthand hoặc long-form chính xác khi bạn hoàn thành.
Cách Thiết Kế Bán Kính Viền
- 01
Chọn một chế độ
Chế độ đồng nhất áp dụng một bán kính cho cả bốn góc. Chế độ từng góc kiểm soát mỗi góc độc lập. Chế độ elliptical thêm bán kính ngang và dọc riêng biệt trên mỗi góc.
- 02
Chọn một đơn vị
Chọn px cho các kích thước tuyệt đối, % cho các giá trị tỷ lệ với kích thước của phần tử, hoặc rem cho các kích thước liên kết với kích thước phông chữ gốc.
- 03
Kéo các thanh trượt
Điều chỉnh các giá trị bán kính và xem phần tử xem trước cập nhật trực tiếp. Đối với chế độ từng góc, kéo thanh trượt của mỗi góc độc lập.
- 04
Xem trước hình dạng
Hộp xem trước áp dụng thuộc tính border-radius CSS thực tế, vì vậy hình dạng bạn thấy là hình dạng trình duyệt của bạn sẽ hiển thị.
- 05
Sao chép CSS
Nhấp vào Sao chép để lấy khai báo border-radius và dán nó vào bảng kiểu của bạn.
Các Hình Dạng Phổ Biến và Khi Nào Sử Dụng Mỗi Chế Độ
- 01Nút viên thuốc: chế độ % đồng nhất, đặt thành 50% — luôn là viên thuốc đầy đủ bất kể chiều rộng nút
- 02Thẻ có làm tròn tinh tế: chế độ px đồng nhất, 8–16px — mẫu UI phổ biến nhất
- 03Thẻ hoặc nhãn không đối xứng: chế độ từng góc, sắc nét ở một bên, tròn ở bên kia
- 04Hình ảnh đại diện tròn: chế độ % đồng nhất, 50% — tỷ lệ với vùng chứa hình ảnh
- 05Hình blob hữu cơ: chế độ elliptical với các giá trị X/Y khác nhau trên mỗi góc
Xem Trước Tức Thì, Không Có Gì Được Tải Lên
Bộ tạo border-radius hoàn toàn ở phía máy khách. Thanh trượt, chuyển đổi chế độ và thay đổi đơn vị đều cập nhật bản xem trước ngay lập tức mà không có lượt máy chủ. Không có tài khoản và không có giới hạn tỷ lệ.
Công cụ hoạt động trên tất cả các trình duyệt hiện đại. Thuộc tính border-radius — bao gồm cú pháp elliptical X/Y — được hỗ trợ trong mọi phiên bản evergreen của Safari, Firefox, Edge và Chrome, vì vậy đầu ra an toàn để sử dụng mà không cần tiền tố nhà cung cấp hoặc fallback.
Câu Hỏi Thường Gặp Về Bộ Tạo Border-Radius
Sự khác biệt giữa px và % đối với border-radius là gì?
Bán kính pixel là tuyệt đối — 16px luôn là 16px. Bán kính phần trăm là tương đối với kích thước phần tử, vì vậy 50% tạo ra một vòng tròn hoàn hảo trên một hộp hình vuông và một ellipse trên một hình chữ nhật.
Khi nào tôi nên sử dụng chế độ elliptical?
Sử dụng chế độ elliptical khi bạn muốn một góc phồng hơn trên một trục — cho một viên thuốc ngang, một hình lá hoặc một blob hữu cơ. CSS biểu thị điều này là X-radii / Y-radii trong shorthand border-radius.
Tại sao bán kính phần trăm của tôi trông sai trên một hộp không phải là hình vuông?
Phần trăm ngang là tương đối với chiều rộng phần tử; phần trăm dọc tương đối với chiều cao của nó. Trên một phần tử rộng, ngắn, các góc kéo dài thành ellipse thay vì cung tròn.
Đầu ra có hoạt động trong mọi trình duyệt không?
Có — border-radius bao gồm cú pháp elliptical được hỗ trợ trong mọi trình duyệt hiện đại: tất cả các phiên bản evergreen của Safari, Firefox, Edge và Chrome. Không cần tiền tố nhà cung cấp.
Cách tạo một vòng tròn hoàn hảo với border-radius?
Đặt tất cả các góc thành 50% ở chế độ phần trăm trên một phần tử hình vuông. Phần tử cũng cần chiều rộng và chiều cao bằng nhau — sử dụng aspect-ratio: 1 / 1 nếu kích thước là động.