Trình Tạo CSS Border Radius
Điều khiển toàn bộ 8 giá trị border-radius một cách trực quan.
Tạo các hình dạng mềm mại (blob) với bản xem trước theo thời gian thực.
Giới thiệu
Trình Tạo CSS Border Radius giúp bạn kiểm soát một cách trực quan toàn bộ 8 giá trị border-radius (bán kính ngang và bán kính dọc của từng góc trong số 4 góc) và xem trước kết quả trong thời gian thực.
Ngoài các góc bo tròn thông thường, bạn có thể tạo ra các hình dạng mềm mại phức tạp (blob) như border-radius: 60% 40% 30% 70% / 60% 30% 70% 40% — rất phổ biến để trang trí phần hero. Mọi thao tác xử lý đều diễn ra cục bộ trong trình duyệt của bạn.
Cách sử dụng
Chọn Kiểu Dáng (Preset)
Bắt đầu từ một kiểu dáng có sẵn (Tròn, Lá, Giọt Nước, v.v.) để nhanh chóng có một hình cơ sở, sau đó tùy chỉnh chi tiết bằng các thanh trượt.
Điều Chỉnh Thanh Trượt
Kéo thanh trượt ngang và dọc cho từng góc. Bản xem trước sẽ được cập nhật ngay lập tức.
Sao Chép CSS
Nhấp vào "Sao chép" để chép phần CSS được tạo vào khay nhớ tạm của bạn và dán nó vào bảng kiểu (stylesheet) của bạn.
Thuật ngữ
- border-radius
- Thuộc tính CSS để làm tròn các góc của phần tử. Hỗ trợ cả px và %, cho phép bạn cấu hình riêng cho mỗi góc.
- Bán kính Chiều ngang / Chiều dọc
- Hai bán kính của hình elip được xác định bằng border-radius. Dấu "/" dùng để tách các giá trị chiều ngang (trước) và chiều dọc (sau).
- Blob (Hình khối bất định)
- Một dạng hình ảnh hữu cơ bất đối xứng được tạo bởi việc đặt các giá trị border-radius ngẫu nhiên hoặc không bằng nhau trên tất cả 8 trục.
- clip-path
- Một thuộc tính CSS để cắt bỏ một phần tử thành các hình tự chọn. Linh hoạt hơn border-radius nhưng cú pháp cũng phức tạp hơn.
- Shorthand (Viết tắt)
- border-radius: 10px 20px 30px 40px — cách chỉ định thông số của cả 4 góc trong một khai báo duy nhất. Sử dụng "/" để tách giữa chiều ngang và chiều dọc.
FAQ
- Q.8 giá trị đó là gì?
- Mỗi góc trong 4 góc đều có bán kính ngang và bán kính dọc, tổng cộng là 8 giá trị. Định dạng: border-radius: A B C D / E F G H.
- Q.Tôi có thể sử dụng hình dạng blob cho mục đích gì?
- Trang trí nền phần hero, mặt nạ cho hình ảnh đại diện, hình dạng nút kêu gọi hành động (CTA), và nhiều hơn nữa.
- Q.Dữ liệu có được gửi đến máy chủ không?
- Không. Mọi thứ được tạo cục bộ ngay trên trình duyệt của bạn.
- Q.Nó có hoạt động trên IE11 không?
- border-radius hoạt động từ IE9. Ký hiệu elip (với "/") cũng hoạt động từ IE9+.
- Q.Tôi có thể sử dụng nó với Sass hoặc Less không?
- Có. Mã được tạo ra là CSS tiêu chuẩn, nên nó hoạt động trực tiếp với Sass, Less và Stylus.
Trường hợp sử dụng
Thiết Kế Nút & Thẻ
Tạo ra các hình dáng bo góc độc đáo cho các nút và các thành phần thẻ thay vì hình tròn tiêu chuẩn.
Trang Trí Nền Blob
Sử dụng các hình dáng hữu cơ blob để trang trí cho khu vực nền của hero trong trang đích.
Mặt Nạ Ảnh Hồ Sơ
Khám phá các cách bo góc khác biệt cho ảnh đại diện, thay cho hình vuông hay hình tròn phổ biến.
Học CSS
Hiểu rõ về nguyên lý hoạt động của border-radius thông qua việc thử nghiệm các thanh trượt.
Gửi phản hồi
Vui lòng cho chúng tôi biết suy nghĩ của bạn để giúp chúng tôi cải thiện công cụ.
Feedback is temporarily suspended
The server is busy or spam protection is active. Please try again later.