CSS3光圈陰影是CSS3中很有趣的一個特性，它可以給元素添加出光圈的效果，讓頁面的表現更加生動、豐富。 CSS3光圈陰影深受前端開發人員的喜愛，下面我們一起來學習一下怎樣使用CSS3光圈陰影。

.box {
width: 200px;
height: 200px;
background: #f00;
box-shadow: 0 0 20px 5px rgba(255, 0, 0, 0.5);
}

上面的代碼是CSS3光圈陰影最基本的寫法，它使用box-shadow屬性。其中第一個參數是水平偏移量，第二個是垂直偏移量，第三個是模糊半徑，第四個是擴散半徑，第五個是陰影顏色與透明度。比如上面的代碼將生成一個水平偏移量和垂直偏移量都為0的陰影，模糊半徑為20px，擴散半徑為5px，顏色為紅色，透明度為0.5的光圈陰影。

.box {
width: 200px;
height: 200px;
background: #f00;
box-shadow: 0 0 20px 5px rgba(255, 0, 0, 0.5), 
0 0 20px 10px rgba(255, 0, 0, 0.3),
0 0 20px 15px rgba(255, 0, 0, 0.1);
}

上面的代碼是如何生成多個光圈陰影的示例，使用逗號將不同陰影的參數隔開。同樣，我們可以使用多個光圈陰影，產生不同的效果。

.box {
width: 200px;
height: 200px;
background: #f00;
box-shadow: inset 0 0 20px 5px rgba(255, 0, 0, 0.5);
}

CSS3光圈陰影還支持內陰影，我們可以通過將inset關鍵字加在前面，來設置內陰影。可以看到，上面的例子與之前最基本的寫法非常類似，只不過多了一個關鍵字。

CSS3光圈陰影的內容還不止這些，以上是最基礎、最簡單的應用。我們可以結合其他CSS特性，將光圈陰影的效果發揮到更大空間。