CSS3圆形高亮效果

Question

如何在网站上对任何对象进行圆形突出显示...

我一直在寻找相关文档，但几乎找不到。虽然我认为现在用css可以实现任何事情，但有些东西让我觉得只能使用canvas之类的工具，并且需要大量内存。

我看过另一篇关于这个问题的文章... (jquery) Blackout the entire screen and highlight a section of the page? 但是他们没有解决圆形问题。

我在一些网站上看到过如何突出显示某个元素，但是怎样才能使突出显示的区域成为一个圆形呢？仅通过添加z-index来使正方形元素显示在遮罩层之上似乎无法将该区域变成圆形...

也许我可以为包含在圆形中的每个元素添加z-index，并在边缘创建与遮罩层相同颜色的阴影（但如果聚光灯需要覆盖部分背景，则需要包括整个背景，这可能会变得很丑）...在某些情况下，这可能有效，但听起来有点不专业，不是吗？

有没有人有好的解决方案来突出显示页面上的对象，但突出显示要成为圆形/几乎像突出显示元素一样...

- mike

Answer 1

你可以使用 border-radius 和 box-shadow 来实现这个功能，至少这是我所能想到的纯 CSS 的唯一方法。

你需要创建一个带有透明背景的圆形元素，然后为其设置完全黑色的 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。

JSFiddle上的演示

- iConnor

---

哎呀，这真是太聪明了...我怎么没想到呢，哈哈...我会尝试快速应用这个方法，然后给你答案。 - mike

哇！我才意识到这是多么的简单。这是我从中制作的一个示例，是否有办法与下面的元素进行交互呢？非常感谢！http://jsfiddle.net/MLNAF/2/ - mike

Answer 2

使用 border-radius 可以制作圆形，其他的东西也许可以通过这个帮助你：http://jquerytools.org/demos/toolbox/expose/

- Abhay Desai

Answer 3

只需使用 border-radius 使您想要“暴露”的容器成为一个圆形。

使用您链接帖子中的 jsfiddle 示例，我已经将其简化以便于跟踪，但基本上，您只需要使用您链接到的帖子以及一个大的 border radius 值来模仿一个圆形。

http://jsfiddle.net/98EAt/

- Lee

---

如果里面有内容怎么办？这是我从你的jfiddle中快速组合的一个例子：http://jsfiddle.net/98EAt/1/我不需要突出显示圆形元素，而是要用圆形突出显示方形元素。感谢您对fiddle的工作！ - mike

Answer 4

距离提出这个问题已经过去了2年，

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

请告知您的反馈意见。

- amd