我正在为 Web 应用程序编写交互式教程，旨在突出用户界面的各个部分。本教程旨在一次聚焦一个部分，并告诉用户如何与之交互。您可能已经在智能手机应用程序上看到过类似的东西。
对于可用于突出现有界面的特定 CSS，我发现的最佳解决方案是使用类似这样的东西，它只是div现有界面的顶部，允许突出显示部分：
https://web.archive.org/web/20120414095101/http://svay.com/experiences/css3-spotlight
然而，CSSradial-gradient只允许圆形和椭圆形，这对于通常是矩形的用户界面元素来说很奇怪。有没有办法实现相同的效果，但使用圆角矩形（暗区是矩形之外的所有内容）？
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)
}
可以调整参数以使渐变边界更柔和或更戏剧化，以及它在聚光灯下的程度。
查看以下内容：
你可以用渐变来做到这一点，但实现圆角矩形会很困难。
一种更简单的方法是使用盒子阴影
.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 个级别的透明度。您可以使用剩余的伪元素以及嵌入阴影进一步详细说明它。
使用渐变的另一种方法（没有圆角，但无论如何都不是坏效果）：
.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;
}
这是非 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+ 桌面浏览器。
我编写了一个小型 jQuery 插件，它创建了四个 div 并将其放置在您的区域/元素周围。
即使这不是您想要的答案，也不要投反对票，这也是您未来脚本的第一个想法。
var element = $("#element1").intro();
$("#element1").click(function() {
element.intro('moveTo', $("#element2"), 500);
});