css如何做出光照 |css3下滑单击出现隐藏

.box {
position: relative;
width: 200px;
height: 200px;
}
.box::before {
content: "";
position: absolute;
top: -20px;
left: -20px;
width: 240px;
height: 240px;
background: rgba(255, 255, 255, 0.8);
border-radius: 50%;
box-shadow: 0px 0px 20px 20px rgba(255, 255, 255, 0.8);
z-index: 1;
}
.box::after {
content: "";
position: absolute;
bottom: -20px;
right: -20px;
width: 240px;
height: 240px;
background: rgba(0, 0, 0, 0.5);
border-radius: 50%;
box-shadow: 0px 0px 20px 20px rgba(0, 0, 0, 0.5);
z-index: 1;
}

上面这段CSS代码是实现光照效果的关键。通过伪元素的方式，给盒子设置两个圆形的光圈，其中一个是白色的光圈，另一个是黑色的光圈。白色光圈向上，黑色光圈向下，这样就形成了一个类似于阳光照射的样式了。

通过调整盒子、光圈的大小和位置以及透明度等参数，可以实现不同的光照效果。例如，可以在其中添加文字、图片等元素，通过光照效果来增强其立体感和视觉效果。

总之，光照效果是CSS中很好玩的一个样式设计，可以让大家的界面变得更加生动。希望大家将来多尝试使用，用自己的智慧创造更加丰富、多样的界面效果。