CSS可以通過box-shadow來實(shí)現(xiàn)發(fā)光的效果，下面我們就來演示一下如何用CSS制作帶有發(fā)光效果的圓形。

.circle {
width: 100px;
height: 100px;
border-radius: 50%; /*將正方形變?yōu)閳A形*/
background-color: #fff; /*設(shè)置圓形的背景顏色*/
box-shadow: 0 0 10px 5px #fff; /*添加發(fā)光效果*/
}

如上代碼，.circle類設(shè)置了圓形的寬度和高度為100px，并且將它的邊角半徑設(shè)置為50%，從而將正方形變?yōu)閳A形。我們還設(shè)置了圓形的背景顏色為純白色。接下來我們通過添加box-shadow屬性來實(shí)現(xiàn)發(fā)光效果。

box-shadow屬性由四個(gè)關(guān)鍵字組成：水平偏移量、垂直偏移量、模糊半徑和陰影大小。下面是每個(gè)關(guān)鍵字的解釋：

• 水平偏移量：陰影相對(duì)于元素的左側(cè)的位置。
• 垂直偏移量：陰影相對(duì)于元素的頂部的位置。
• 模糊半徑：陰影的模糊半徑，值越大陰影越模糊。
• 陰影大小：陰影的大小。

在我們的代碼中，水平和垂直偏移量都是0，表示陰影在圓形的正下方。模糊半徑被設(shè)置為10px，所以陰影會(huì)變得比較模糊。陰影的大小被設(shè)置為5px，也就是陰影會(huì)超出圓形的邊界5px。

通過這個(gè)簡單的CSS代碼，我們就成功的實(shí)現(xiàn)了一個(gè)帶有發(fā)光效果的圓形，這個(gè)應(yīng)用場(chǎng)景非常的廣泛，比如網(wǎng)頁設(shè)計(jì)、UI設(shè)計(jì)等等。我們只要根據(jù)需要修改圓的大小和顏色就可以應(yīng)用到不同的場(chǎng)所。