使用HTML / CSS在非常规形状周围渲染框阴影

Question

我目前正在开展一个小项目，我正在尝试创建一个代表加色的维恩图。我开始使用三个圆（border-radius：50％;）并使用静态位置元素和隐藏溢出的组合来创建一些圆形重叠的更复杂的形状。你可以在这里看到我现在拥有的东西：

http://jsfiddle.net/GjvEE/

我想添加的一个功能是在当前被鼠标悬停的形状周围添加彩色框阴影。我面临的独特挑战是通过嵌入具有隐藏溢出的元素来呈现，并且需要创建“仿边缘”，沿着该边缘渲染图的每个部分的框阴影。我已经考虑过简单地删除这种方法并通过SVG创建形状的选项，但是我很想知道你们是否有任何聪明的想法，只使用传统的HTML和CSS3将这种交互构建成更复杂的形状。

提前致谢！

Answer 1

如何使用CSS：在其他人后面生成新的圆圈并使用渐变为透明的径向渐变背景？

我已经在这里的红色和蓝色圆圈上完成了Webkit的快速，基本实现。注意：hover：在样式定义之后。 http://jsfiddle.net/stevelove/2hpwp/