CSS Pill / Trình tạo hình dạng sân vận động
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 cả bốn góc được liên kết và đẩy lên bán kính rất lớn: 999px. Trên một hình chữ nhật có kích thước nút điển hình, bán kính lớn sẽ được trình duyệt cắt bớt xuống chính xác một nửa chiều cao của hộp, điều này tạo ra hình viên thuốc hoặc sân vận động được làm tròn hoàn toàn thay vì hình vuông có các góc hơi tròn.
Đây là lý do tại sao các nút viên thuốc không cần giá trị bán kính chính xác được điều chỉnh theo chiều cao của mỗi nút — bất kỳ số nào lớn hơn một nửa chiều cao đều cho kết quả được cắt bớt giống nhau, đó cũng là lý do tại sao 999px (hoặc thậm chí 9999px) đã trở thành cách viết tắt cộng đồng không chính thức cho 'làm tròn mọi cách' trong CSS.
Thay đổi kích thước hộp theo bố cục của riêng bạn và 999px tương tự sẽ tiếp tục tạo ra một viên thuốc đầy đủ ở bất kỳ độ cao nào, vì trình duyệt luôn tự động cắt bớt một nửa hộp. Sao chép CSS khi nó trông ổn hoặc hủy liên kết các góc để tạo một hình con nhộng bất đối xứng.