Border Radius Generator
Generate border radius
Generate border radius Chạy cục bộ trong trình duyệt của bạn
border-radius: 12px;
About the
Trình tạo bán kính đường viền đặt bốn góc của hộp một cách độc lập, với bản xem trước trực tiếp và cung cấp cho bạn CSS. Thứ tự viết tắt là điều mọi người hay quên: trên cùng bên trái, trên cùng bên phải, dưới cùng bên phải, dưới cùng bên trái, đi theo chiều kim đồng hồ từ trên cùng bên trái. Một giá trị áp dụng cho tất cả bốn góc, hai giá trị áp dụng cho các cặp đường chéo và bốn giá trị lần lượt đề cập đến từng góc. Khi cả bốn đều khớp, công cụ sẽ phát ra dạng một giá trị, đây là dạng mà bạn thực sự muốn trong hầu hết thời gian.
Where people use the
- Khớp bán kính với thông số thiết kế mà không cần đoán giá trị pixel.
- Chỉ làm tròn các góc trên cùng của thẻ hoặc phương thức.
- Định hình nút viên thuốc, có bán kính bằng một nửa chiều cao phần tử.
- Tìm bán kính biến hình đại diện hình vuông thành hình tròn.
How to use the
- 1
Kéo thanh trượt góc
Mỗi góc có thanh trượt riêng từ 0 đến 150 pixel. Hộp xem trước sẽ tròn khi bạn di chuyển nó.
- 2
Giữ các góc được liên kết hoặc hủy liên kết chúng
Khi bật Liên kết, việc di chuyển bất kỳ thanh trượt nào sẽ di chuyển cả bốn thanh trượt lại với nhau. Tắt nó đi để định hình các góc riêng lẻ, đó là cách bạn tạo đuôi bong bóng lời nói hoặc hình chiếc lá.
- 3
Đọc CSS
Nếu cả bốn đều khớp, bạn sẽ nhận được tốc ký một giá trị. Nếu chúng khác nhau, bạn sẽ có được dạng bốn giá trị đầy đủ theo chiều kim đồng hồ.
- 4
Thay vào đó hãy xem xét một tỷ lệ phần trăm
Bán kính 50 phần trăm trên một phần tử hình vuông sẽ tạo ra một hình tròn. Hoán đổi đơn vị px lấy tỷ lệ phần trăm trong biểu định kiểu của bạn nếu đó là thứ bạn cần.
Lời khuyên và phương pháp hay nhất
- Sử dụng tỷ lệ phần trăm khi phần tử thay đổi kích thước, pixel khi không thay đổi kích thước.
- Nút viên thuốc không phải là bán kính cố định; nó có chiều cao bằng một nửa, vì vậy 9999px là câu trả lời lười biếng nhưng mạnh mẽ.
- Giữ bán kính nhất quán trên một bộ thành phần; trộn 4px, 6px và 8px có vẻ ngẫu nhiên.
Câu hỏi thường gặp
Bốn giá trị theo thứ tự nào?
Theo chiều kim đồng hồ từ trên cùng bên trá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, dưới cùng bên trái. Một cách ghi nhớ hữu ích là nó bắt đầu từ nơi bạn bắt đầu đọc và xoay vòng như mặt đồng hồ.
Hai hoặc ba giá trị có ý nghĩa gì?
Hai giá trị đặt các đường chéo: giá trị đầu tiên là trên cùng bên trái và dưới cùng bên phải, giá trị thứ hai là trên cùng bên phải và dưới cùng bên trái. Ba giá trị được đặt trên cùng bên trái, sau đó trên cùng bên phải và dưới cùng bên trái, rồi dưới cùng bên phải.
Làm cách nào để tạo một vòng tròn?
Sử dụng 50 phần trăm cho phần tử đã có hình vuông. Việc sử dụng pixel chỉ tạo ra một vòng tròn nếu bán kính bằng một nửa chiều rộng, điều này sẽ phá vỡ thời điểm phần tử thay đổi kích thước.
Tôi có thể làm tròn các góc theo chiều ngang và chiều dọc theo cách khác nhau không?
Cú pháp đầy đủ cho phép bán kính hình elip được viết dưới dạng giá trị ngang, dấu gạch chéo, sau đó là giá trị dọc. Công cụ này tạo ra dạng thống nhất đơn giản hơn, vì vậy hãy thêm phiên bản gạch chéo bằng tay nếu bạn cần hình dạng đó.
Tại sao góc tròn của tôi bị cắt bớt?
Bởi vì nội dung con không được cắt bớt vào hộp tròn. Thêm phần ẩn tràn vào phần tử, nếu không hình ảnh hoặc nền bên trong phần tử đó sẽ vẫn hiển thị các góc vuông.