CSS3聚光灯效果使用带有渐变的圆角矩形 [英] CSS3 spotlight effect using a rounded rectangle with gradients

问题描述

我为网络应用程序编写了一个交互式教程，用于突出用户界面的各个部分。本教程旨在一次聚焦一个部分，并告诉用户如何与它进行交互。您可能已经在智能手机应用上看到类似的东西。

对于可用于聚焦现有界面的特定CSS，我发现的最佳解决方案是使用某些像这样，它只是一个 div 在现有界面的顶部，允许突出显示部分：

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

但是，CSS radial-gradient 只允许使用圆和椭圆，这对于通常是矩形的用户界面元素来说很奇怪。有没有办法实现相同的效果，但用圆角矩形（调暗区域是矩形外的一切）？

解决方案

一个很好的答案，给了我一个伟大的提示，找出一个简单的方法来获得我想要的是什么。这种效果可以通过插入盒子阴影加上常规的阴影来实现，并且具有额外的好处，即聚光灯盒仅需要重新定位以突出显示特定区域，而不是重新绘制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）
} 
  

可以调整参数，使渐变边框更柔和或更引人注目，

演示

I'm writing an interactive tutorial for a web app that is meant to highlight the various parts of the user interface. The tutorial is meant to spotlight one part at a time and tell the user how to interact with it. You've probably seen something similar on smartphone apps.

For the specific CSS that could be used to spotlight an existing interface, the best solution I've found is using something like this, which is just a div on top of the existing interface that allows portions to be highlighted:

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

However, the CSS radial-gradient only allows for circles and ellipses, which is strange for user interface elements that are usually rectangular. Is there a way to achieve the same effect but with rounded rectangles (dimmed area is everything outside the rectangle)?

解决方案

Vals gave an excellent answer, and gave me a great hint to figure out a simple way to get exactly what I wanted. This effect can be achieved with an inset box shadow plus a regular one, and has the added benefit that the spotlight box need only be repositioned to highlight a particular area instead of redrawing a CSS gradient.

Here's the code:

.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)
}

One can tweak the parameters to make the gradient border softer or more dramatic, and how much it pokes into the spotlight.

demo

这篇关于CSS3聚光灯效果使用带有渐变的圆角矩形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！