CSS中的發光range是一種很酷的效果，可以讓網站元素看起來更加引人注目和生動。下面我們來學習如何在CSS中實現發光range的效果。

input[type=range] {
-webkit-appearance: none;
width: 100%;
margin: 13.5px 0;
}
input[type=range]:focus {
outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 10px;
border-radius: 6px;
border: 0.5px solid #000;
background-color: #ddd;
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
border: 1px solid #000;
height: 30px;
width: 30px;
border-radius: 50%;
margin-top: -10.5px;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #ff0000), color-stop(0.50, #ffff00), color-stop(1.00, #00ff00));
}
input[type=range]:focus::-webkit-slider-runnable-track {
background-color: #ccc;
}

在上述代碼中，我們定義了一個input標簽類型為range，并重置了默認樣式。我們還定義了軌道的顏色、滑塊的大小和顏色，并使用了webkit漸變來實現滑塊的發光效果。我們還對焦點狀態進行了樣式修改，以實現鼠標選擇時的變化效果。

現在，我們的range輸入框已經實現了一個非常酷的發光效果，可以在你的網站中添加一些生動的元素，吸引讀者的注意力。