Trình tạo Border Radius CSS
Trình tạo border-radius CSS trực quan. Điều chỉnh từng góc độc lập với xem trước thời gian thực và sao chép mã CSS ngay lập tức.
CSS border-radius là gì?
CSS border-radius là thuộc tính làm tròn các góc của viền ngoài phần tử. Bạn có thể đặt từng góc độc lập bằng cách sử dụng một đến bốn giá trị.
Cách tạo hình tròn hoàn hảo với border-radius?
Đặt border-radius thành 50% trên phần tử hình vuông (chiều rộng và chiều cao bằng nhau). Đối với hình elip, sử dụng border-radius: 50% trên phần tử hình chữ nhật.
Tôi có thể sử dụng đơn vị nào cho border-radius?
Border-radius chấp nhận px, %, em, rem, vw, vh và các đơn vị độ dài CSS khác. Phần trăm tương đối so với kích thước phần tử.
Cú pháp viết tắt của border-radius là gì?
Cú pháp viết tắt theo mẫu: trái-trên phải-trên phải-dưới trái-dưới. Một giá trị áp dụng cho tất cả các góc. Hai giá trị đặt trái-trên/phải-dưới và phải-trên/trái-dưới.
Tôi có thể tạo góc hình elip không?
Có, sử dụng cú pháp dấu gạch chéo (/) bạn có thể định nghĩa bán kính ngang và dọc riêng biệt. Ví dụ: border-radius: 50% / 100px.
Border-radius có hoạt động trên tất cả phần tử không?
Border-radius hoạt động trên hầu hết phần tử HTML bao gồm div, button, img và input. Tuy nhiên, có thể không cắt nội dung tràn mà không có overflow: hidden.
Tôi có thể tạo hình phức tạp với border-radius không?
Có, bằng cách kết hợp các giá trị bán kính khác nhau cho từng góc, bạn có thể tạo hình viên thuốc, hình elip, hình lá và hình hữu cơ tùy chỉnh.
Border-radius có được hỗ trợ trong tất cả trình duyệt không?
Có, border-radius được hỗ trợ trong tất cả trình duyệt hiện đại bao gồm Chrome, Firefox, Safari, Edge và trình duyệt di động.
Cách tạo nút hình viên thuốc?
Đặt border-radius bằng hoặc lớn hơn một nửa chiều cao phần tử. Với nút cao 40px, sử dụng border-radius: 20px hoặc cao hơn.
Border-radius có ảnh hưởng đến hình nền không?
Có, border-radius cắt nền, hình nền và viền của phần tử. Nền tự động theo các góc bo tròn.
Tôi có thể animat border-radius không?
Có, border-radius có thể animat bằng chuyển tiếp và animat CSS. Bạn có thể chuyển đổi mượt mà giữa các giá trị bán kính khác nhau.
Tôi có thể sử dụng border-radius với biến đổi CSS không?
Có, border-radius hoạt động tốt với các biến đổi CSS như rotate, scale và translate.
Cách tạo hình tròn có viền?
Áp dụng border-radius: 50% cho phần tử hình vuông có chiều rộng và chiều cao bằng nhau, rồi thêm thuộc tính border.
Sự khác biệt giữa thuộc tính góc riêng lẻ và viết tắt?
Thuộc tính riêng lẻ như border-top-left-radius cho bạn kiểm soát chính xác từng góc. Cú pháp viết tắt cho phép đặt nhiều góc trong một khai báo.
Cách sử dụng Trình tạo Border Radius CSS
Thiết kế góc bo tròn trực quan với trình tạo CSS border-radius này. Mọi thứ chạy cục bộ trong trình duyệt và không có dữ liệu nào được tải lên.
- Chọn px, %, em hoặc rem trong danh sách thả xuống Unit.
- Kéo các thanh trượt Top Left, Top Right, Bottom Right và Bottom Left để bo từng góc một cách riêng biệt.
- Bật Link all corners để áp dụng một giá trị cho cả bốn góc cùng lúc.
- Sao chép CSS đã tạo từ phần xem trước rồi dán vào stylesheet của bạn.
Đặt 50% cho cả bốn góc sẽ tạo thành hình tròn hoặc viên nhộng hoàn hảo; dùng em hoặc rem để bán kính co giãn theo cỡ chữ.
Công cụ liên quan
- Trình tạo Box Shadow CSS Trình tạo box-shadow CSS trực tuyến miễn phí. Tạo bóng đẹp trực quan với offset, blur, spread, màu và inset có thể điều chỉnh. Xem trước trực tiếp và sao chép mã ngay lập tức.
- Trình tạo Gradient CSS Tạo gradient CSS tuyệt đẹp trực quan. Tạo gradient tuyến tính, hướng tâm và hình nón với nhiều điểm dừng màu, góc và vị trí tùy chỉnh. Sao chép mã CSS sẵn sàng sản xuất ngay lập tức.
- Trình tạo CSS Grid Trình tạo CSS Grid trực quan miễn phí với xem trước trực tiếp. Thiết kế bố cục lưới responsive tương tác và xuất mã CSS sẵn sàng sản xuất ngay.
- Trình tạo CSS Flexbox Trình tạo CSS Flexbox trực quan với xem trước trực tiếp. Điều chỉnh thuộc tính flex và nhận mã CSS sẵn sàng sử dụng.
- Trình Tạo Bo Góc CSS Trình tạo bo tròn sáng tạo miễn phí trực tuyến. Kéo 8 điểm điều khiển hoặc chọn hình blob có sẵn để tạo hình khối CSS hữu cơ và sao chép mã ngay lập tức.
- Trình chuyển đổi màu Trình chuyển đổi màu trực tuyến miễn phí. Chuyển đổi định dạng HEX, RGB, HSL, HSV ngay lập tức với bộ chọn trực quan. 100% riêng tư, chạy trong trình duyệt của bạn.
- Trình tạo easing CSS Trình tạo easing CSS trực tuyến miễn phí. Kéo các điểm điều khiển cubic-bezier trên đường cong tương tác, chọn trong 18 mẫu có sẵn, xem bóng lặp lại liên tục và sao chép hàm thời gian ngay.
- Trình tạo text-shadow CSS Trình tạo text-shadow CSS trực tuyến miễn phí. Xếp nhiều lớp bóng với lệch ngang, làm mờ, màu và độ mờ, thử mẫu Neon, 3D, Retro và sao chép mã CSS ngay.