Sử dụng bán kính đường viền CSS lớn hơn nhiều so với kích thước phần tử

Question

Có vấn đề gì khi sử dụng một số border-radius lớn hơn nhiều so với kích thước của một phần tử không?

Ví dụ, nếu tôi muốn làm một lớp .circle như vậy:

.circle { 
    -webkit-border-radius: 1000px; 
    -moz-border-radius: 1000px; 
    border-radius: 1000px; 
} 

Vì vậy, bây giờ tôi có thể áp dụng lớp này để bất kỳ yếu tố để làm cho nó một vòng tròn, như vậy:

<img width="80" height="80" alt="My Gravatar" class="circle" src="https://www.gravatar.com/avatar/b262eb4b3bf006cf68ef60eae63ddffc"> 

Tôi biết tôi chưa gặp phải bất kỳ vấn đề nào cho đến nay, nhưng tôi có thể tự đặt mình lên để giải quyết các vấn đề khác không?

Answer 1

Hoàn toàn không có vấn đề gì. Bạn được tự do áp dụng lớp học bất cứ nơi nào bạn muốn, không có vấn đề thực sự. Các phần tử nhỏ hơn (chiều cao hoặc chiều rộng nhỏ hơn) 2000px sẽ trở thành vòng kết nối, các phần tử lớn hơn (chiều cao hoặc chiều rộng lớn hơn) 2000px sẽ không trở thành vòng kết nối, mà là giữ nguyên hình dạng ban đầu nhưng có các góc được làm tròn lớn.

này đã được đưa lên trong W3 here:

"Nếu bất kỳ bán kính ngang lớn hơn một nửa chiều rộng của hộp, nó giảm đến giá trị mà nếu có bán kính dọc là lớn hơn một nửa. Đây là một thuật toán dễ dàng, bởi vì nó nhìn vào từng bán kính độc lập với tất cả các số khác nhau, nhưng nó không cho phép biên giới hữu ích kết hợp bán kính lớn và nhỏ và có thể biến vòng tròn quý thành hình elip quý. " - The documentation of the border-radius property

tôi nên đề cập rằng bạn có thể sử dụng phần trăm như một giá trị, 50% là tối đa mà sẽ tạo ra một vòng tròn cho phần tử là một hình vuông ban đầu. Nếu phần tử không phải là một hình vuông thì nó sẽ tạo ra một hình elip.

Cũng lưu ý rằng tất cả các giá trị trên 50% sẽ tương đương 50% khi áp dụng cho tất cả các góc (như viết tắt border-radius:50% áp dụng cho mỗi góc). Theo jbutler483 pointed out trong các ý kiến, nếu nó được áp dụng cho các góc riêng lẻ, 50% không giống như 100% vì cách chúng kết hợp với nhau. Thay vào đó tất cả các giá trị trên 100% tương đương 100%.

Điều quan trọng cần lưu ý là một cái gì đó như border:50% và border:really-high-pixel-value có thể có các hiệu ứng khác nhau nếu phần tử không vuông.