CSS陰影是在網頁設計中常用的一種效果，可以使元素看起來更加豐富和立體。而在實現陰影效果時，使用兩個盒子可以讓陰影更加自然，一般分別表示內容區和陰影區，下面是具體的代碼實現：

.shadow {
position: relative;
display: inline-block;
}
.shadow .content {
position: relative;
z-index: 1;
}
.shadow .shadow-box {
position: absolute;
z-index: 0;
top: 10px;
left: 10px;
right: -10px;
bottom: -10px;
box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.3);
}

上述代碼中，父元素“shadow”使用了相對定位，并且設置了inline-block屬性，這樣可以讓shadow作為內聯元素出現，并且子元素可以根據它的位置來確定。而shadow的子元素包括“content”和“shadow-box”兩個，其中“content”是用來放置需要設置陰影的內容，而“shadow-box”則是陰影區，設置為絕對定位并且z-index屬性設置為0，這樣陰影就可以在內容區下方顯示。top、left、right、bottom屬性的值控制著陰影的大小和位置，而box-shadow屬性則是用來設置陰影的顏色、模糊度、擴散半徑和陰影偏移量，這很大程度上決定了陰影效果的好壞。

由于“content”本身是沒有陰影效果的，所以要讓陰影和它緊密聯系在一起，可以將“content”的z-index屬性設置為1，這樣就可以讓其顯示在陰影之上，完美地實現了陰影的兩邊效果。