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

Question

我目前正在做一个小元素，我正在尝试创建一个表示加色的维恩图。我从三个圆圈开始(边框半径:50%；)并使用静态定位元素与 overflow hidden 的组合来创建一些圆圈重叠的更复杂的形状。你可以在这里看到我目前拥有的东西:

http://jsfiddle.net/GjvEE/

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

提前致谢!

Answer 1

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

我已经在此处的红色和蓝色圆圈中快速完成了 Webkit 的基本实现。注意 :hover:after 样式定义。 http://jsfiddle.net/stevelove/2hpwp/