我有一个<table>，我想覆盖一个圆圈，让圆圈外的所有东西都模糊不清。圆圈将根据功能改变位置，因此需要是动态的。我知道如何用图像做到这一点，但这需要一张桌子。我使用了以下CSS，但这只会让我模糊整个单元格。
-webkit-filter: blur(10px)
我能想到的两个选项是覆盖某种由正方形和圆形组成的svg，并模糊边缘之间的空间（这可能吗？），或者应用某种模糊渐变到符合圆的边缘的细胞。
任何想法都将不胜感激。 这是我想要完成的一个例子。 http://i.stack.imgur.com/f5EqT.png
答案 0 :(得分：6)
可以做这样的事情，但可能不像你希望的那样简单。
我的技术涉及克隆整个内容区域，并将其完全覆盖在原始区域之上，但仅显示其中的一部分。
您可以通过javascript克隆该区域（jQuery＆＃39; s .clone()可以很好地工作），或者您可以在HTML中再次包含所有标记，但对于这么大的表格，这是效率不高。
为了只显示它的一小部分，我将它全部放在div设置overflow: hidden的元素内，这样所有的溢出都会被切断。
棘手的部分是将重叠位置保持在需要的位置。
在我的例子中，我有一个圆圈移动跟随鼠标。默认情况下，圆圈和克隆内容绝对位于原始内容的左上角，允许它排成一行，但随着我的圆圈移动，内容随之移动，因为它位于圆圈内（设置{ {1}}会使圆圈的行为与overflow: hidden一样，包含绝对位置。
所以，为了弥补这一点，我总是将克隆内容移动到与圆圈移动相反的方向上。
然后，这只是模糊原始内容的问题，同时保持克隆内容清晰。
我希望有所帮助！
