css kutu gölgesi + saydam arka plan resimleri = sezgisel arıza

Question

• Bazı bağlantılar için arka plan resmi olarak kullanıyorum bir düğme resmim var.
• Arka plan resminde yuvarlak köşeler var.
• Ben görüntünün

sorundur içinde gölge koyarak yerine bir css gölge kullanmak istiyorum, gölge eleman etrafında çizilmiş gibi görünüyor. Arka plan resminin saydam kısımlarında alt gölge rengini görmeyi umduğum halde, arka plan rengini görüyorum (see this jsfiddle).

Gerçek hedefim biraz daha karmaşıktır, ancak ilk üç mermi noktasını doyurabilirsem, bu görevi çivilebilirim. Spesifik olarak, yapmak istediğim, bir düğme görüntüsünün (yuvarlak köşeler) sağ ve sol bölümlerinin arka plan görüntüleri olan iki iç içe geçmiş eleman kullanmaktır, böylece aynı css'yi herhangi bir uzunlukta metin etrafında bir 'düğme' sarmak için kullanabilirim. Arka planlar bir css 'sürgülü kapılar' stili ile çakıştığından, bir png alfa alt gölgesi, görüntülerin üst üste geldiği 2x karanlık bir bölüm gösterir. Soo .. Css gölgesi kullanacağımı sanıyordum, ama jsFiddle'da da görebildiğiniz gibi, bununla da problemler var.

Herhangi bir fikrin var mı?

Answer 1

Kutu gölgeleri saydam arka planlarla gösterilmez. Daha basit bir test durumu şöyle olurdu:

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

Çıktı beklenen görüntü bulanık siyah kare olur mu? Şey ... hayır, damla gölgesi olan beyaz bir kare. http://jsfiddle.net/UjhrW/

... sen, DropShadow için ayrı işaretlemeyi gerek beyaz ile doldurun ve daha sonra bulanık bir kare gibi görünüyor böylece gölge düşüşüyle ​​belirleyecektir ne yapmak istediğinizi elde etmek için

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

http://jsfiddle.net/Etmty/