Tôi đang gặp sự cố trong đó đường viền của div ngoài với góc tròn bị cắt bởi phần tử bên trong có độ phân giải CSS3. Đây có phải là lỗi với CSS3 - nếu có, tôi vui lòng gửi báo cáo lỗi.Đây có phải là lỗi với CSS3 không: Góc tròn có đường viền CSS3
Nếu không, làm cách nào để khắc phục sự cố này?
Nguồn & Demo đây: http://jsfiddle.net/joshuamcginnis/2aJ8X/
Ảnh chụp màn hình:
Vấn đề không phải là độ dốc - cung cấp cho phần tử <h2> của bạn một nền tảng vững chắc để xem. Thay vào đó, bạn cần phải làm tròn các góc của <h2> cũng như các gói <div>.
Thêm border-radius: 10px 10px 0 0; và các phiên bản dành riêng cho nhà cung cấp thích hợp cho kiểu dáng <h2> và tất cả đều hoạt động.
Giải pháp này hoạt động cho tất cả các trình duyệt ngoại trừ IE. Tôi chỉ thử nó trong IE9, nơi tô màu gradient dường như "chảy qua" biên giới. (Hoặc tôi thiếu một cái gì đó?) Xem: http://stackoverflow.com/questions/4692686/ie9-border-radius-and-background-gradient-bleeding – cfouche
Góc tròn không hoạt động trong IE8 hoặc ít hơn – Downpour046
giải pháp này không tốt nếu container có tràn: có thể nhìn thấy và nó có thể cuộn, và tôi đang đối mặt với vấn đề đó NGAY BÂY GIỜ ... – vsync
Nó không cụ thể cho gradient background. Nó chỉ là nền của phần tử h2 chồng lên nhau ngồi trên đầu các góc tròn. Tôi không phải là chắc chắn đó là một lỗi theo nghĩa hẹp nhất, nhưng nó khá nổi tiếng. Sửa lỗi dễ nhất là làm tròn các góc của phần tử với nền. Example: just setup for chrome
tràn: bị ẩn; không hoạt động
nhưng điều này không:
h2
{
position:relative;
z-index:-1;
....
}
giải pháp tuyệt vời, nó hoạt động tốt nhất. – vsync
đó là một vấn đề khá phổ biến khi bạn thiết lập nền trên một yếu tố khác nhau để các góc bo tròn. – Spudley