CSS3作為前端開發中重要的一環，除了常規的樣式設置，還可以通過它來設置前端燈效果。

首先，在CSS中我們可以使用偽元素::before和::after來創建一個元素的隱形復制，然后對其進行樣式設置。因為偽元素不在文檔流中，所以我們可以通過它來創建一些看似沒有實際內容的元素，再通過設置元素的邊框、背景等屬性來模擬出燈的效果。

.front-light::before{
content: "";
position: absolute;
top: -5px;
left: -5px;
right: -5px;
bottom: -5px;
z-index: -1;
background-color: rgba(255,255,255,0.3);
border-radius: 50%;
}

上述代碼中，我們為前端燈的元素設置了一個::before偽元素，然后通過設置content為空字符串，使其沒有實際內容，而position設置為absolute，z-index設置為-1，使其不會干擾到我們的實際元素。接著，我們設置了top、left、right、bottom的值都為-5px，使偽元素的邊框擴展到了原始元素之外，從而達到了燈罩的效果。最后，我們指定了偽元素的background-color為半透明的白色，使其看起來更像燈光照射的效果。

另外，為了讓燈效果更逼真，我們可以再創建一個偽元素用于模擬燈泡的光暈效果：

.front-light::after{
content: "";
position: absolute;
top: -15px;
left: -15px;
right: -15px;
bottom: -15px;
z-index: -2;
background-color: rgba(255,255,255,0.2);
border-radius: 50%;
filter: blur(20px);
}

上述代碼中，我們同樣創建了一個::after偽元素，并設置了position、z-index等屬性。然后，我們再次將偽元素的邊框向四周擴展了十五個像素，這樣在對偽元素進行高斯模糊（即filter: blur(20px)）后，就可以模擬出燈泡的光暈效果。

通過這樣的一些簡單的(CSS3)樣式設置，我們就可以輕松實現前端頁面中的燈效果啦！