CSS是網(wǎng)頁設(shè)計中的很重要的一部分，它可以通過添加樣式來改變網(wǎng)頁的外觀和交互性。其中，陰影效果是常用的一種樣式，本文將介紹如何使用CSS給四周加陰影效果。

在CSS中，box-shadow屬性可以添加一個或多個陰影效果到元素上。它的語法如下：

box-shadow: h-shadow v-shadow blur spread color inset;

其中，h-shadow和v-shadow分別代表陰影的水平和垂直位置。blur代表陰影的模糊程度，spread代表陰影的大小。color代表陰影的顏色，inset表示內(nèi)陰影。

下面我們以一個div元素為例，展示如何添加四周的陰影效果。

div {
box-shadow: 3px 3px 10px #888888;
}

上述代碼中，我們將div元素的陰影位置設(shè)置為(3px, 3px)，模糊程度為10px，大小默認，顏色為#888888（灰色）。結(jié)果是div元素周圍出現(xiàn)了一層灰色的陰影。

如果要添加內(nèi)陰影效果，可以在box-shadow屬性中添加inset關(guān)鍵字：

div {
box-shadow: 3px 3px 10px #888888 inset;
}

上述代碼中，inset關(guān)鍵字表示內(nèi)陰影效果。結(jié)果是div元素內(nèi)部出現(xiàn)了一層灰色的陰影。

除了設(shè)置單個陰影外，我們還可以設(shè)置多個陰影。例如，下面的代碼將div元素上方添加了一個灰色的陰影和下方添加了一個白色的陰影：

div {
box-shadow: 0 -10px 10px #888888,
0 10px 10px #ffffff;
}

上述代碼中，逗號分隔了兩個box-shadow屬性，因此實現(xiàn)了兩個陰影效果。第一個陰影表示在div元素上方添加寬度為10px的灰色陰影，第二個陰影表示在div元素下方添加寬度為10px的白色陰影。

通過以上示例，我們學(xué)習(xí)了如何使用CSS給四周加陰影效果，讓我們來實踐一下吧。