CSS3前端燈是一種用CSS3技術(shù)制作出來(lái)的模擬燈光效果的前端組件。它可以用于網(wǎng)站、應(yīng)用程序、游戲等各種前端開(kāi)發(fā)場(chǎng)景中，為界面增添一抹舒適的氛圍。CSS3前端燈通過(guò)設(shè)置背景漸變、陰影、邊框、內(nèi)陰影等CSS3屬性，構(gòu)建出一個(gè)呈現(xiàn)出來(lái)動(dòng)感十足的前端燈光效果。

/* CSS代碼 */
.front-light {
width: 200px;
height: 200px;
background-image: radial-gradient(circle at 50% 50%, #fff0 0, #fff0 30px, #fff 35px, #f00 40px, #f00 80px, #0006 120px, #0006 130px, #000 140px, #0006 150px, #0006 160px, #000 170px, #fff0 180px, #fff0 200px);
box-shadow: 0 0 40px #f00;
border: 2px solid #0006;
border-radius: 50%;
padding:20px;
box-sizing: border-box;
}
.front-light::before {
content: "";
position: absolute;
top: 5px;
left: 5px;
width: 190px;
height: 190px;
background-color: #000;
opacity: 0.2;
border-radius: 50%;
z-index: -1;
}
.front-light::after {
content: "";
position: absolute;
top: 15px;
left: 15px;
width: 170px;
height: 170px;
background-color: #fff;
opacity: 0.2;
border-radius: 50%;
z-index: -2;
}

為了構(gòu)建這樣的前端燈光效果，我們首先要設(shè)定背景漸變。可以通過(guò)radial-gradient()屬性來(lái)實(shí)現(xiàn)漸變效果，其中circle是漸變的形狀，表示正圓形。50% 50%是漸變的中心點(diǎn)坐標(biāo)，表示該漸變中心點(diǎn)位于元素的中央。#fff0和#fff表示兩種不同的顏色值，這里我們采用白色漸變到透明色的效果，從而使得前端燈光效果更加自然。接下來(lái)就是設(shè)置一些光影效果，比如box-shadow、border、border-radius等等，來(lái)達(dá)到前端燈光的真實(shí)感效果。