Đường viền biên giới CSS 1px phá vỡ xung quanh bán kính đường viền

Question

Điều này dành cho nhà phát triển web. Khi sử dụng bán kính đường viền 1px trên hình tròn hoặc hình vuông với các góc thực sự được làm tròn, đột quỵ bắt đầu vỡ. Nếu chúng ta thay đổi nó thành 2px thì sẽ càng tốt và càng có nhiều px chúng ta thêm vào. Nhưng có cách nào để khắc phục vấn đề này với cú đánh 1px không?

background: rgba(32, 32, 32, .9); 
height: 30px; 
width: 30px; 
border: 1px solid white; 
border-radius: 20px; 
:hover { 
height: 300px; 
width: 200px; 
} 

Hình ảnh được đính kèm!

Answer 1

Rất tiếc, bạn không thể thực hiện điều này. Điều đó tùy thuộc vào trình duyệt để xác định cách hiển thị các pixel phụ tạo nên đường viền 1px cong. Một số trình duyệt sẽ antialias nó độc đáo, những người khác sẽ không.

Giải pháp đáng tin cậy duy nhất là sử dụng hình ảnh, nghĩa là ... 90 giây. Hoặc một cái gì đó XD Point là, chúng ta không cần phải làm những việc như thế, nhưng đôi khi chúng ta phải giải quyết cho rendering hoàn hảo, hoặc sử dụng các phương pháp lỗi thời.

Answer 2

Điều này là phổ biến khi có nền và đường viền được chỉ định. Cách duy nhất để sửa lỗi này là có hai phần tử riêng biệt, một với màu nền và một với màu đường viền có đệm bằng với chiều rộng đường viền.

Xem this article để có giải thích tốt hơn.

Answer 3

thêm box-shadow: 0 0 1px 0px white inset, 0 0 1px 0px white; sẽ cung cấp cho bạn tính năng chống răng cưa mà bạn đang tìm kiếm.