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

Question

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

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

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

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

Answer 1

Vals 给出了一个很好的答案，并给了我一个很好的提示，让我想出一个简单的方法来得到我想要的东西。这种效果可以通过插入框阴影加上常规阴影来实现，并且具有额外的好处，即聚光灯框只需重新定位以突出显示特定区域，而不是重新绘制 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 demo
• Example usage in a tutorials package (code)

Answer 2

这是非 CSS3 解决方案。该解决方案使用透明度为 10% 的黑色背景 png，聚光灯在下方添加为图像。

HTML

<div class="spotlightContainer">
    <div class="imageContainer">
        <img src="/images/tuinderlusten.jpg" alt="de tuin der lusten"/>
    </div>
    <div class="darkCover">
        <div class="dark darktop"> </div>
        <div class="darkmiddle">
            <div class="dark darkleft"> </div>
            <div class="spotlight"> </div>
            <div class="dark darkright"> </div>
        </div>
        <div class="dark darkbottom"> </div>
    </div>
</div>

JavaScript

var darkRight, darkLeft, darkBottom, darkTop, darkMiddle, containerHeight, containerWidth;

$(function(){
    containerWidth = $(".spotlightContainer").width();
    containerHeight = $(".spotlightContainer").height();
    darkTop = $(".darktop");
    darkBottom = $(".darkbottom");
    darkLeft = $(".darkleft");
    darkRight = $(".darkright");
    darkMiddle = $(".darkmiddle");
    darkTop.height(100-50);
  darkBottom.height(containerHeight-100-50);
  darkLeft.width(100-50);
  darkRight.width(containerWidth-100-50);
    setSpotlight(100, 100);
    $(".spotlightContainer").on("mousemove", function(e){
        setSpotlight(e.pageX, e.pageY);
    });
});

var setSpotlight = function(pageX, pageY){
    var radius = 100;
        darkMiddle.height(radius*2);
        if(pageX < radius){
            pageX = radius;
        } else if (pageX > containerWidth -radius){
            pageX = containerWidth -radius;
        }
        darkTop.height(pageY-radius);
        darkBottom.height(containerHeight-pageY-radius);
        darkLeft.width(pageX-radius);
        darkRight.width(containerWidth-pageX-radius);
}

CSS

html, body{
    width: 100%;
    height: 100%;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
}

div{
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    border: 0;
}

body{
    overflow: hidden;
}

.dark{
    background: url("/images/darkcover.png");
}

.darktop{
    width: 100%;
    height: 100%;
}

.darkbottom{
    width: 100%;
    height: 0px;
}

.darkmiddle{
    height:0px;
    width: 100%;
}

.darkmiddle div{
    float: left;
    height: 100%;
}

.darkleft{
    width: 200px;
}

.darkright{
    width: 200px;
}

.spotlight{
    width: 200px;
    background: url("/images/spotlight.png");
    background-size: cover;
}

.spotlightContainer{
    width: 100%; height: 100%; z-index: 500; position: fixed;
}

.spotlightContainer .imageContainer, .spotlightContainer .darkCover{
    width: 100%; height: 100%; position: absolute; top: 0; left: 0;
}

.spotlightContainer .imageContainer{
    max-height: 100%;   max-width: 100%; width: 100%;
}

聚光灯图片

我对此进行了测试，它适用于所有现代和 IE7+ 桌面浏览器。

Answer 3

您可以使用渐变来做到这一点，但实现圆角矩形会很困难。

一种更简单的方法是使用盒子阴影

.overlay {
  position: absolute;
  left: 50px;
  top: 50px;
  width: 200px;
  height: 200px;
  border-radius: 20px;

  box-shadow: 0px 0px 0px 1000px rgba(255, 255, 255, 0.5);
}

.overlay:after {
  content: '';
  position: absolute;
  left: -25px;
  top: -25px;
  right: -25px;
  bottom: -25px;
  border: solid 1px gray;
  border-radius: 25px;
  box-shadow: 0px 0px 0px 1000px rgba(255, 255, 255, 0.6);
}

这样圆角很容易。我设置了一个伪元素，让它更优雅；通过这种方式，您可以获得 2 个级别的透明度。您可以使用剩余的伪元素进一步阐述它，也可以使用嵌入阴影。

demo

另一种使用渐变的方法（没有圆角，但效果也不错）：

.overlay2 {
  position: absolute;
  left: 40px;
  top: 50px;
  width: 200px;
  height: 200px;
  border-radius: 40px;
  border: solid 1px gray;
  background-image: linear-gradient(90deg,white,transparent 25%, transparent 75%, white), linear-gradient(0deg,white,transparent 25%, transparent 75%, white);
  background-size: 100% 50%, 50% 100%;
  box-shadow: 0px 0px 0px 1000px white;
}

demo2

Answer 4

我编写了一个小型 jQuery 插件，它创建了四个 div 并将其放置在您的区域/元素周围。

即使这不是您想要的答案，也不要投反对票，这也是您未来脚本的第一个想法。

var element = $("#element1").intro();
$("#element1").click(function() {
    element.intro('moveTo', $("#element2"), 500);
});

http://jsfiddle.net/DoubleYo/DQ6jj/