bóng hộp css + hình nền trong suốt = phân tích trực quan

Question

• Tôi có hình ảnh nút mà tôi đang sử dụng làm hình nền cho một số liên kết.
• Hình nền có các góc được làm tròn.
• Tôi muốn sử dụng một bóng css thả thay vì đưa bóng thả trong hình ảnh

Vấn đề là, thả bóng dường như được rút ra xung quanh phần tử. Mặc dù tôi đã dự kiến ​​sẽ thấy màu bóng đổ qua các phần trong suốt của hình nền, nhưng thay vào đó tôi thấy màu nền (see this jsfiddle).

Mục tiêu thực tế của tôi phức tạp hơn một chút, nhưng nếu tôi có thể làm hài lòng ba điểm đầu tiên sau đó tôi có thể làm được nhiệm vụ này. Cụ thể, những gì tôi muốn làm là sử dụng hai phần tử lồng nhau với hình nền của phần bên phải và bên trái của hình ảnh nút (góc tròn) để tôi có thể sử dụng cùng một css để bọc 'nút' xung quanh văn bản có độ dài bất kỳ. Kể từ khi hình nền chồng lên nhau trong một phong cách 'cửa trượt' css, một bóng thả alpha png cho thấy một phần tối 2x nơi hình ảnh chồng lên nhau. Soo .. Tôi nghĩ rằng tôi muốn sử dụng một bóng css, nhưng như bạn có thể thấy trong jsFiddle, có vấn đề với điều đó quá.

Bất kỳ ý tưởng nào?

Answer 1

Hộp đổ bóng không hiển thị qua nền trong suốt. Một trường hợp thử nghiệm đơn giản hơn sẽ là:

.box { 
    width: 100px; 
    height: 100px; 
    margin: 20px; 
    background-color: transparent; 
    box-shadow: 0 0 10px #000; 
}​ 

Sản lượng dự kiến ​​sẽ là một hình vuông màu đen mờ đẹp phải không? Ừm ... không, đó là một hình vuông màu trắng với một giọt nước mắt. http://jsfiddle.net/UjhrW/

Để đạt được những gì bạn muốn làm, bạn sẽ cần đánh dấu riêng cho DropShadow, điền vào nó với màu trắng, và sau đó thiết lập tràn của bóng để nó trông giống như một hình vuông mờ ...

.box { 
    width: 100px; 
    height: 100px; 
    margin: 20px; 
    background-color: #000; 
    box-shadow: 0 0 10px 6px #000; 
}​ 

http://jsfiddle.net/Etmty/