logo标签列表

使用HTML/CSS渲染非传统形状周围的盒子阴影

javascripthtmloverflowcss
11

我目前正在进行一个小项目，尝试创建代表添加颜色的维恩图。我从三个圆圈（border-radius: 50%;）开始，并使用静态定位元素与隐藏溢出的组合来创建一些更复杂的形状，其中圆圈重叠。您可以在此处查看我当前拥有的内容：

http://jsfiddle.net/GjvEE/

我想添加的一个功能是，在鼠标悬停时为当前选定的形状添加彩色盒子阴影。我面临的独特挑战是由于嵌套了具有隐藏溢出的元素，并且需要创建“伪边缘”沿着每个图表部分渲染盒阴影。我已考虑过放弃此方法并通过SVG创建形状，但我有兴趣看看是否有任何聪明的想法，可以仅使用传统的HTML和CSS3构建此类交互的更复杂的形状。

提前谢谢！

非常好的使用数据属性。 - BumbleB2na
你想要支持IE8或更早的版本吗？ - Ryan Erickson
1个回答
1
如何使用CSS的:after在其他圆形后面生成新的圆形，并使用径向渐变背景淡化到透明？
我已经为这里的红色和蓝色圆形进行了快速、基本的Webkit实现。请注意:hover:after样式定义。 http://jsfiddle.net/stevelove/2hpwp/
我考虑使用:after伪类，但我仍然需要解决的问题是如何“追踪”我用嵌套元素创建的橄榄形状的边缘。渐变，以及它们提供的增强方向控制，可能是朝着正确方向迈出的一步。 - Aaron
只是跟进一下：我做了一些研究，看起来在具有非零border-radius的元素上使用overflow: hidden的行为仍然在很大程度上不稳定，并且在Web浏览器之间存在差异。我想SVG，由HTML5 Please推荐并带有旧版浏览器的polyfill，比我最初想象的更可行一些。感谢您抽出时间回答。 - Aaron
没问题。这是一个有趣的方式来度过一些空闲时间。 - stevelove
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接