css3 光照 |css 覆盖before

/* 普通元素模拟灯光照射 */
.box {
width: 200px;
height: 200px;
background-color: #ddd;
box-shadow: 0 0 20px rgba(255, 255, 255, 0.8);
}
/* 线性渐变模拟光源 */
.box-2 {
width: 200px;
height: 200px;
background-color: #ddd;
background: linear-gradient(135deg, rgba(255,255,255,1) 0%,rgba(255,255,255,0.5) 100%);
}
/* 径向渐变模拟聚光灯 */
.box-3 {
width: 200px;
height: 200px;
background-color: #fff;
background: radial-gradient(circle closest-side, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0) 90%);
}

以上是CSS3一些光照效果的实现方式。通过添加不同的色调和渐变方式，可以产生不同的效果。可以看到，光照效果能够为网站增加更多的设计元素和视觉效果。