夜光效果是網頁設計中經常使用的一種效果，它可以使網頁在黑暗中變得更加引人注目?，F在，讓我們來學習如何使用CSS來制作夜光效果。

/* 為夜光元素設置基本樣式 */
.night-light {
position: relative;
display: inline-block;
text-shadow: 0px 0px 10px #fff;
}
/* 設置夜光效果 */
.night-light::before {
content: "";
position: absolute;
top: -5px;
left: -5px;
right: -5px;
bottom: -5px;
background-color: #fff;
opacity: 0.3;
border-radius: 50%;
z-index: -1;
}
/* 設置鼠標懸停時的夜光效果 */
.night-light:hover {
text-shadow: 0px 0px 20px #fff;
}
.night-light:hover::before {
opacity: 0.5;
}

我們首先為夜光元素設置一些基本樣式，比如讓它相對定位并添加一些文字陰影效果。接下來，使用::before偽元素來創建夜光效果的圓形背景。通過border-radius屬性，我們將它設置成一個圓形，然后對它設置一些透明度。

最后，在:hover偽類中我們增加了一些夜光效果的樣式，使它更加明顯。當鼠標懸停在夜光元素上時，我們將文本陰影增加到20像素，并將夜光效果的透明度增加到0.5，營造出更加引人注目的效果。

通過這些CSS代碼，我們可以很容易地制作出夜光效果，讓我們的網頁在黑暗中更加出眾。