CSS 實(shí)現(xiàn)圖標(biāo)的陰影
在網(wǎng)頁(yè)設(shè)計(jì)中，圖標(biāo)是不可或缺的元素。而為了讓圖標(biāo)更加立體有形，我們可以使用 CSS 實(shí)現(xiàn)陰影效果。下面是一個(gè)簡(jiǎn)單的例子：

.icon {
width: 100px;
height: 100px;
background-color: #000;
border-radius: 50%;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5);
}

上述代碼中，我們通過(guò)設(shè)置.icon類(lèi)的width和height屬性把這個(gè)元素變成了一個(gè)圓形。使用background-color屬性來(lái)填充顏色，border-radius屬性來(lái)設(shè)置邊框的圓角半徑。
接下來(lái)就是重頭戲了，我們通過(guò)box-shadow屬性實(shí)現(xiàn)陰影效果。這個(gè)屬性包含四個(gè)值：水平偏移量、垂直偏移量、模糊半徑、陰影顏色。其中，前兩個(gè)值分別表示陰影相對(duì)于元素水平和垂直方向的偏移量，可以為負(fù)值。第三個(gè)值表示陰影的模糊程度，值越大則越模糊。第四個(gè)參數(shù)為顏色值，我們可以使用 RGBA 格式來(lái)設(shè)置顏色和透明度。在上面的代碼中，我們?cè)O(shè)置了陰影相對(duì)于元素向下偏移 5px，水平方向不偏移，模糊半徑為 10px，顏色為黑色半透明。
通過(guò)這種方式，我們可以讓圖標(biāo)看起來(lái)更加有立體感，并且可以實(shí)現(xiàn)多種不同的陰影效果。當(dāng)然，如果你有更加高級(jí)的需求，可以嘗試使用 CSS3 的更多特性來(lái)實(shí)現(xiàn)更加豐富多彩的陰影效果。