div 是HTML中最常用的標簽之一，用于在網頁中創建盒狀的容器。而加陰影效果則可以使這個容器看起來更加立體和吸引人。在本文中，我們將詳細討論如何使用CSS樣式實現 div 的左右陰影效果。
實現 div 左右陰影效果的方法有很多種，我們將逐個介紹一些經典的案例。，我們來看一個簡單的示例：

示例1: 在 div 的左右兩邊添加陰影效果。

<style>
.shadowDiv {
width: 200px;
height: 200px;
margin: 0 auto;
background-color: #fff;
box-shadow: -5px 0 5px rgba(0,0,0,0.5), 5px 0 5px rgba(0,0,0,0.5);
}
</style>
<div class="shadowDiv"></div>

在這個示例中，我們創建了一個名為 shadowDiv 的類，用于定義 div 的樣式。我們設置了 div 的寬度為200px，高度也為200px，并使用margin: 0 auto將其水平居中。背景顏色設置為白色。接下來的關鍵是box-shadow屬性，它使用兩個陰影參數分別為 -5px 0 5px rgba(0,0,0,0.5) 和 5px 0 5px rgba(0,0,0,0.5)，這表示在 div 的左側和右側分別添加一個5像素寬度的陰影，顏色為黑色（rgba(0,0,0,0.5)），并設置了透明度為0.5。通過這個簡單的CSS樣式，我們就實現了 div 的左右陰影效果。
下面，我們來看看另外一個更加高級的案例：

示例2: 在 div 的左側陰影漸變。

<style>
.shadowDiv {
width: 200px;
height: 200px;
margin: 0 auto;
background-color: #fff;
box-shadow: -10px 0 10px rgba(0, 0, 0, 0.5), inset -10px 0 10px rgba(0, 0, 0, 0.5);
}
</style>
<div class="shadowDiv"></div>

在這個示例中，我們同樣使用了box-shadow屬性來實現陰影效果。不同的是，我們在其中加入了inset關鍵詞，表示這個陰影是一個內部陰影，而不是一個外部陰影。這樣設置可以使陰影漸變到div內部。同樣地，我們通過將陰影參數設置為-10px 0 10px rgba(0, 0, 0, 0.5)來在div的左側添加一個漸變的陰影效果。這樣，我們就實現了一個帶有左側陰影漸變的div。

以上是兩個比較簡單的案例，下面我們將通過參考其他文章中的真實案例，來展示一些更加復雜和實用的div 左右陰影效果。

示例3: 創造層次感的左右陰影。

<style>
.shadowDiv {
position: relative;
width: 400px;
height: 300px;
margin: 0 auto;
background-color: #fff;
z-index: 1;
}
.shadowDiv:before {
content: "";
position: absolute;
top: 0;
left: -10px;
width: 10px;
height: 100%;
box-shadow: 10px 0 10px rgba(0, 0, 0, 0.5);
z-index: -1;
}
.shadowDiv:after {
content: "";
position: absolute;
top: 0;
right: -10px;
width: 10px;
height: 100%;
box-shadow: -10px 0 10px rgba(0, 0, 0, 0.5);
z-index: -1;
}
</style>
<div class="shadowDiv"></div>

在這個示例中，我們使用了偽元素:before和:after來實現div左右兩側的陰影效果。，我們將shadowDiv的position屬性設置為relative，以便偽元素能夠相對于其進行定位。然后，我們通過:before偽元素來創建左側的陰影，將其內容設置為空，并設置寬度為10px，高度為100%。通過position: absolute屬性將其定位到div左側，并通過box-shadow屬性添加了左側的陰影效果。:after偽元素同樣的原理實現了右側的陰影效果。這樣，我們就實現了一個帶有創造層次感的左右陰影的div。
在本文中，我們學習了如何使用CSS樣式來實現div的左右陰影效果。通過簡單的box-shadow屬性，我們可以輕松地添加陰影效果。而對于更加復雜和實用的陰影效果，我們可以參考其他文章中的真實案例，使用偽元素或其他技巧來實現。通過這些技術，我們可以為網頁創建出更加立體和吸引人的設計效果。