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.
Cú pháp border-radius với 8 giá trị nghĩa là gì?
Trong cú pháp border-radius: h1 h2 h3 h4 / v1 v2 v3 v4, các giá trị trước dấu gạch chéo là bán kính ngang (trên trái, trên phải, dưới phải, dưới trái) và các giá trị sau là bán kính dọc. Dùng các giá trị khác nhau ở mỗi hướng chính là cách tạo ra hình blob hữu cơ.
Sử dụng CSS đã tạo như thế nào?
Sao chép dòng border-radius rồi dán vào bất kỳ quy tắc CSS nào của phần tử cần tạo hình, ví dụ .card { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; }. Hoạt động với CSS thuần, Sass, giá trị tùy ý của Tailwind và style nội tuyến.
Hình blob thường được dùng ở đâu?
Hình blob phổ biến trong ảnh minh họa hero, avatar, ảnh đại diện, thẻ tính năng, nút bấm và nền trang trí trong thiết kế web và ứng dụng hiện đại.
Bo tròn có hoạt động trên mọi trình duyệt không?
Có. border-radius được mọi trình duyệt hiện đại hỗ trợ, bao gồm Chrome, Firefox, Safari, Edge và trình duyệt di động, không cần tiền tố nhà cung cấp.
Có thể tạo chuyển động cho hình blob không?
Có. border-radius là thuộc tính có thể hoạt hình, nên thêm transition CSS sẽ cho phép biến hình mượt mà giữa các dạng, ví dụ .blob { transition: border-radius .8s ease; }.
Khác biệt giữa cú pháp 4 giá trị và 8 giá trị là gì?
Dạng 4 giá trị đặt cùng một bán kính ngang và dọc cho mỗi góc, đủ cho viên nang hoặc hình tròn. Dạng 8 giá trị tách riêng bán kính ngang và dọc, nhờ đó tạo được hình bất đối xứng hữu cơ.
Làm sao tạo hình tròn hoàn hảo?
Đặt cả tám giá trị bằng 50% trên phần tử vuông, hoặc đơn giản dùng border-radius: 50%. Bạn cũng có thể bắt đầu từ một hình có sẵn gần tròn rồi tinh chỉnh.
Dữ liệu của tôi có bị 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 CSS và JavaScript thuần. Mọi thứ bạn kéo, nhập hay sao chép đều không được gửi tới máy chủ nào.
Có dùng được cho phần tử không vuông không?
Có, nhưng bán kính theo phần tỷ lệ với kích thước phần tử, nên hình chữ nhật sẽ có góc elip và trông khác bản xem trước vuông. Hãy dùng các giá trị tạo ra làm điểm khởi đầu rồi điều chỉnh.
Cách sử dụng Trình Tạo Bo Góc CSS
Border-radius tám giá trị tạo ra các khối blob hữu cơ với góc elip mà hình chữ nhật bo tròn thông thường không thể sánh được. Nắn hình bằng các điểm kéo và sao chép CSS hoàn chỉnh — mọi thứ được kết xuất trực tiếp trong trình duyệt của bạn.
- Kéo bất kỳ điểm nào trong tám điểm nằm trên các cạnh hình — điểm ở cạnh trên và dưới chỉnh bán kính ngang, điểm hai bên trái phải chỉnh bán kính dọc.
- Bấm một trong sáu ô hình có sẵn để xuất phát từ một blob đã thiết kế, rồi tinh chỉnh giá trị trong các ô nhập Bán kính ngang và Bán kính dọc (mỗi góc một giá trị, 0–100%).
- Nhấn Ngẫu nhiên để tạo ngay một hình hữu cơ mới trong một cú bấm, hoặc Đặt lại để trở về hình và màu mặc định.
- Chọn Màu hình dạng và Màu nền để xem blob trên bảng màu mục tiêu — cả hai cập nhật tức thì.
- Nhấn Sao chép CSS để lấy khai báo border-radius hiển thị trực tiếp trên thanh dưới cùng, rồi dán vào bất kỳ phần tử nào.
Áp dụng mã này lên phần tử vuông kèm overflow: hidden để có vẻ ngoài blob kinh điển; đơn vị phần trăm giữ đường cong mượt ở mọi kích thước, còn dấu gạch chéo trong cú pháp ngăn cách bán kính ngang và dọc.
Công cụ liên quan
- 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.
- 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 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 bảng màu Tạo bảng màu đẹp và hài hòa ngay lập tức với trình tạo trực tuyến miễn phí của chúng tôi. Hỗ trợ chế độ đơn sắc, tương tự, bổ sung, ba màu, phân tách bổ sung và bốn màu. Tinh chỉnh màu bằng thanh trượt HSL, khóa mục yêu thích và xuất dưới dạng CSS, Tailwind, JSON hoặc SVG. 100% dựa trên trình duyệt, dữ liệu của bạn không bao giờ rời khỏi thiết bị.
- 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.
- Trình tạo clip-path CSS Trình tạo clip-path CSS trực tuyến miễn phí. Thiết kế hình polygon, circle, ellipse và inset với các điểm kéo thả, xem trước trực tiếp và sao chép mã CSS chỉ một cú nhấp.