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

【问题标题】：Rendering box shadow around unconventional shapes with HTML/CSS使用 HTML/CSS 在非常规形状周围渲染框阴影
【发布时间】：2012-06-13 06:48:42
【问题描述】：

我目前正在做一个小项目，我正在尝试创建一个表示加色的维恩图。我从三个圆圈开始（边界半径：50%；），并使用静态定位元素和隐藏溢出的组合来创建一些圆圈重叠的更复杂的形状。你可以在这里看到我目前拥有的：

http://jsfiddle.net/GjvEE/

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

提前致谢！

【问题讨论】：

非常好的使用数据属性
您要支持 IE8 或更早版本吗？

标签： javascript html overflow css

【解决方案1】：

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

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

【讨论】：

我考虑过使用:after 伪类，我仍然要解决的问题是“跟踪”我使用嵌套元素创建的那些橄榄形状的边缘。不过，渐变及其提供的增强方向控制可能是朝着正确方向迈出的一步。
只是跟进：我一直在做一些研究，看起来overflow: hidden 对具有非零 border-radius 的元素的行为仍然在很大程度上处于变化之中，并且在网络浏览器。我想 SVG，由 HTML5 Please 推荐，带有用于旧浏览器的 polyfill，作为一种解决方案比我最初想象的更可行。感谢您花时间回答。
没问题。花几分钟的空闲时间是一种有趣的方式。