css3 探照灯效果 |css3实现圆角锯齿边框

.spotlight {
position: relative;
}
.spotlight img {
position: absolute;
z-index: 1;
transition: all .4s ease-in-out;
}
.spotlight:hover img {
opacity: 0.5;
}
.spotlight::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, .7);
z-index: 2;
opacity: 0;
transition: all .4s ease-in-out;
}
.spotlight:hover::before {
opacity: 1;
}

以上代码实现了一个简单的探照灯效果，通过将图片设置为绝对定位并调整其z-index值，使其在光影效果中处于上层位置。hover状态下，将图片的不透明度调整为0.5，从而让背景的光影效果更加突出。

同时，通过在图片父级容器中添加一个伪元素，实现背景光影效果的添加。在hover状态下，背景光影透明度逐渐变化，使得高亮效果更加自然。