CSS 實現圖標的陰影
在網頁設計中，圖標是不可或缺的元素。而為了讓圖標更加立體有形，我們可以使用 CSS 實現陰影效果。下面是一個簡單的例子：

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

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