使用带渐变的圆角矩形的CSS3聚光灯效果

Question

我正在为一个Web应用程序编写一个交互式教程,旨在突出显示用户界面的各个部分.本教程旨在一次突出显示一个部分,并告诉用户如何与其进行交互.您可能已经在智能手机应用上看到了类似的东西.

对于可用于突出现有界面的特定CSS,我发现的最佳解决方案是使用类似这样的东西,它只是div现有界面的顶部,允许突出显示部分:

https://web.archive.org/web/20120414095101/http://svay.com/experiences/css3-spotlight

但是,CSS radial-gradient只允许使用圆形和椭圆形,这对于通常为矩形的用户界面元素来说很奇怪.有没有办法达到相同的效果,但圆角矩形(变暗区域是矩形外的一切)？

Answer 1

瓦尔斯给出了一个很好的答案,并给了我一个很好的暗示,找出一个简单的方法来得到我想要的.这种效果可以通过插入框阴影加上常规阴影来实现,并且具有额外的好处,即仅需要重新定位聚光灯框以突出显示特定区域而不是重新绘制CSS渐变.

这是代码:

.overlay {
  position: absolute;
  left: 50px;
  top: 50px;
  width: 200px;
  height: 200px;
  border-radius: 20px;  
  box-shadow: 0px 0px 4px 10px rgba(0,0,0,0.5) inset, 0px 0px 0px 1000px rgba(0,0,0,0.5)
}

人们可以通过调整参数来使渐变边界更柔和或更具戏剧性,以及它在聚光灯下的亮度.

请查看以下内容:

• JSFiddle演示
• 教程包中的示例用法(代码)