Trình tạo hình vuông CSS - Hình vuông tròn
Thiết kế bán kính đường viền CSS một cách trực quan: bốn thanh trượt góc độc lập tính bằng px hoặc phần trăm, lối tắt liên kết tất cả các góc cho các vòng tròn và viên thuốc tức thì, cùng với chế độ blob hữu cơ với các hình dạng ngẫu nhiên.
kết quả
Trang này mở trình tạo bán kính đường viền với tất cả bốn góc được liên kết ở mức 30%, độ tròn vừa phải nằm giữa hình vuông sắc nét và hình tròn đầy đủ. Nó không phải là một hình tròn toán học thực sự (siêu hình elip), nhưng nó là thuộc tính CSS gần nhất có thể có được và đó là giá trị mà hầu hết các hệ thống thiết kế đạt được khi chúng muốn có giao diện đó.
Cái tên này xuất phát từ các biểu tượng ứng dụng hình vuông tròn được phổ biến trên iOS: đủ đường cong ở mỗi góc để tạo cảm giác mềm mại và thân thiện, nhưng không bao giờ quá nhiều đến mức hình dạng được coi là hình tròn. Các ô biểu tượng, hình thu nhỏ thẻ và khung hình đại diện hiện đại đều dựa vào bán kính trong phạm vi tương tự này vì lý do chính xác đó.
Đẩy thanh trượt được liên kết lên để có cảm giác tròn trịa hơn, mềm mại hơn hoặc kéo xuống để có cảm giác vuông vức hơn — dòng CSS cập nhật theo mọi thay đổi, sẵn sàng sao chép khi đường cong phù hợp với biểu tượng hoặc thẻ của bạn.