HTML/CSS ile olağandışı şekillerin etrafında kutu gölgesi oluşturma

Question

Şu anda, ek renklerini temsil eden bir venn diyagramı oluşturmaya çalıştığım küçük bir proje üzerinde çalışıyorum. Üç daire ile başladım (sınır yarıçapı:% 50;) ve çevrelerin çakıştığı daha karmaşık şekillerden bazılarını oluşturmak için gizli taşma özelliğine sahip statik konumlu öğelerin bir bileşimini kullandım. Sen Şu anda burada ne var görebilirsiniz: Ben eklemek istiyorum

http://jsfiddle.net/GjvEE/

Bir özellik şu anda üzerine fare edilen şeklin etrafında renkli kutu gölge eklenmesidir. Karşı karşıya kaldığım benzersiz zorluk, gizli taşma ile öğelerin yuvalanması ve şemanın her bölümü için kutu gölgesinin oluşturulması için "sahte kenarlar" yaratma gereksinimi tarafından sunulur. Bu yaklaşımı basitçe kazıyarak ve şekilleri SVG yoluyla oluşturmayı tercih ettim, ancak bu türden bir etkileşimin, geleneksel HTML ve CSS3'ü kullanarak daha karmaşık şekillere dönüştürmek için herhangi bir zekice düşüncenin olup olmadığını görmek istiyorum.

Şimdiden teşekkürler!

Answer 1

CSS'leri kullanma hakkında: diğerlerinin ardında yeni daireler oluşturduktan ve şeffaflaşan radyal bir degrade arka plan kullanıldıktan sonra?

Webkit için burada kırmızı ve mavi daireler üzerinde basit, basit uygulamalar yaptım. Not: vurgulu: stil tanımlarından sonra. http://jsfiddle.net/stevelove/2hpwp/