2010-08-29 26 views
5

trang web nằm ở đây: CLICK TO VIEW THE WEBSITECSS3: Transparent Tròn góc Vấn đề

Dưới đây là một hình ảnh của vấn đề: alt text

Như bạn thấy, sử dụng CSS3 border-radius, và background: transparent tôi đã có thể làm cho những gì trông giống như một "cutout" từ div. Vấn đề nên được rõ ràng rằng các góc trong suốt là tốt.

Tôi biết tôi chỉ có thể sử dụng hình ảnh và sự cố sẽ được giải quyết, nhưng tôi muốn sử dụng CSS3. Tôi nghĩ rằng có lẽ một số cách khéo léo để có được xung quanh vấn đề này, nhưng tôi không nghĩ về nó. Tôi muốn lưu ý rằng tôi đang sử dụng css3pie.com để cho phép IE6 thông qua chức năng CSS8 CSS3.

+0

Tôi nghĩ rằng trong trường hợp này một hình ảnh * sẽ * phù hợp, đặc biệt. với cách bạn đang cố gắng ghép lại với nhau nền đó ... –

+0

offtopic: sử dụng thông minh của hình ảnh và nền gradient. trong một khoảnh khắc, tôi đã tự hỏi tại sao nền được thay đổi kích thước khi tôi phóng to cửa sổ trên màn hình có độ phân giải cao. – mauris

+0

Câu hỏi +1 là intresting –

Trả lời

1

Đây là một chút hacky

quy tắc này áp dụng đối với các p thẻ

-webkit-box-shadow: #A3AFC6 0px -4px 0px 3px; 
+0

Cảm ơn rất nhiều. Thậm chí không nghĩ đến việc làm một cái bóng hộp. – ParoX

0

này làm việc cho tôi trong thanh công cụ nhà phát triển trong Chrome ...

On div.middle_bg thiết lập chiều cao để 85px. Sau đó, đặt nền trên thẻ p bên trong thẻ.

+0

Phiên bản Chrome nào hoạt động cho bạn? Tính năng này không hoạt động đối với tôi khi sử dụng Chrome 6.0.472.51 beta trên OSX. Nó cũng không hoạt động trong Safari 5.0.1 trên OSX. Trong cả hai trường hợp, tôi thấy phần cắt bỏ như được hiển thị ở trên. – gutch

+0

Tương tự ở đây. thẻ 'p' đã được đặt thành' nền: trong suốt' ... – ParoX

+0

Ồ ... không nhận thấy rằng nó phải trong suốt. Disregard, tôi câm :) – Corey