Trình tạo vòng tròn CSS - Bán kính đường viền 50%
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 và đặt thành 50%, giá trị biến một hộp thành hình tròn không sử dụng gì ngoài CSS. Thành thật mà nói: trên một hộp hình vuông, điều này tạo thành một hình tròn hoàn hảo, nhưng trên một hộp hình chữ nhật, 50% tương tự thay vào đó tạo ra một hình elip giống như sân vận động, vì mỗi góc chỉ làm tròn một phần tư của riêng nó.
Sự khác biệt đó quan trọng vì bán kính đường viền 50% là cách phổ biến nhất để tạo hình đại diện hình tròn, huy hiệu biểu tượng và dấu chấm trạng thái trong CSS — đơn giản hơn nhiều so với việc cắt một hình tròn bằng mặt nạ hoặc vẽ một hình tròn trong SVG và nó vẫn sắc nét ở mọi kích thước vì đây là tỷ lệ phần trăm tương đối chứ không phải bán kính pixel cố định.
Chuyển hộp sang kích thước hình vuông cố định trong CSS của riêng bạn để khóa hình tròn hoàn hảo hoặc cố ý để nó hình chữ nhật để có hình dạng giống viên thuốc — dù sao đi nữa, các góc vẫn được liên kết ở đây để một thanh trượt duy nhất giữ cho cả bốn góc đồng bộ trong khi bạn sao chép CSS kết quả.