【问题标题】：Circular highlight css3圆形高亮css3
【发布时间】：2014-02-03 00:48:45
【问题描述】：

如何在网站上的任何对象上制作圆形突出显示......

我环顾四周，几乎找不到任何相关文档。尽管我似乎相信现在使用 css 一切皆有可能，但有些事情告诉我，这只能用于 canvas 之类的东西，并且会占用大量内存。

我看到的关于这个的唯一其他帖子就是这个...... (jquery) Blackout the entire screen and highlight a section of the page? 虽然他们没有解决那里的循环问题

我在一些网站上看到过如何突出显示某个元素，但是如何将突出显示的区域变成一个圆圈呢？通过仅添加 z-index 使正方形元素显示在叠加层上方，似乎不可能使该区域成为圆形..

也许我可以对圆圈中包含的每个元素进行 z 索引，并在边缘周围创建一个与覆盖层颜色相同的阴影（但如果聚光灯需要投射到背景的一部分上，我需要包含整个背景，这可能会变得丑陋）...在某些情况下，这实际上可能有效，但这听起来有点古怪，不是吗？

任何人都有一个很好的解决方案来突出页面上的对象，但突出显示是一个圆圈/几乎就像突出一个元素......

【问题讨论】：

标签： html css

【解决方案1】：

问题提出后 2 年，

我已经为此开发了一个插件，

让我知道您的反馈。

【讨论】：

【解决方案2】：

你可以用 border-radius 和 box-shadow 做到这一点，至少这是我能想到的唯一方法 pure css

你要做的是制作一个带有transparent背景的圆形元素，然后给它一个完全黑色的box-shadow，这将填满你的整个页面，你可以获得一些惊人的效果。

示例代码

#torch{
    width: 200px;
    height: 200px;
    background: transparent;
    border-radius: 50%;
    position: fixed;
    box-shadow: 0px 0px 0px 2000px #000, 0px 0px 50px inset;
}

不要忘记添加前缀-moz-, -webkit- ..etc，如果需要也不要忘记z-index。

Demo at JSFiddle

【讨论】：

是的，这太聪明了……我怎么没想到，哈哈……我会试着很快应用这个然后给你答案
哇哦，我才意识到这是多么简单。这是我用它制作的小提琴，有没有办法能够与下面的元素进行交互？非常感谢！ jsfiddle.net/MLNAF/2
没关系，我刚刚发现了指针事件：无；再次感谢大家，你们都很棒！
没问题，玩得开心！
太棒了！谢谢

【解决方案3】：

通过使用border-radius 来制作圆圈，其他的东西可能对你有帮助..http://jquerytools.org/demos/toolbox/expose/

【讨论】：

【解决方案4】：

只需使用border-radius 将您要“暴露”的容器做成一个圆圈。

使用链接帖子中的 jsfiddle 示例，我已对其进行了精简以便更容易理解，但本质上，您只需要使用链接到的帖子以及大边框半径值来模拟一个圆圈。

http://jsfiddle.net/98EAt/

【讨论】：

如果里面有内容呢？这是我从您的 jfiddle 中快速整理的一个示例：jsfiddle.net/98EAt/1 我不需要突出显示圆形元素，而是突出显示带有圆形突出显示的方形元素。也感谢小提琴的工作！！