在 CSS 中，有很多種方式可以為網頁元素添加陰影效果。其中一種最常見的方法就是使用 box-shadow 屬性。這個屬性能夠讓你輕松地為元素的邊框添加陰影。但如果你想讓元素的兩條邊都有陰影，就需要一點小技巧。

具體來說，要給元素的兩條邊都添加陰影，你需要將元素分為兩層。一層用來顯示元素本身，另一層則用來添加陰影。然后使用偽元素在兩層之間創建一條分割線，以此來實現兩條邊都有陰影的效果。

.shadow-element {
position: relative;
z-index: 0;
}
.shadow-element::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 50%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: -1;
transform: skewX(-15deg); /* 將分割線傾斜，以獲得更好的效果 */
}
.shadow-element::after {
content: "";
position: absolute;
top: 0;
right: 0;
width: 50%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: -1;
transform: skewX(15deg); /* 將分割線傾斜，以獲得更好的效果 */
}
.shadow-element-inner {
position: relative;
z-index: 1; /* 將元素放在分割線上方，以顯示元素本身 */
}

首先，在你想要添加陰影的元素上加上一個 .shadow-element 類。然后，創建兩個偽元素 .shadow-element::before 和 .shadow-element::after，分別用來創建左邊和右邊的陰影。注意，這兩個偽元素需要有一個比實際元素寬度更寬的寬度（這里設置為 50%），并且它們需要被傾斜（使用 skewX 屬性）以便更好地呈現陰影效果。

在 .shadow-element 類下，再添加一個 .shadow-element-inner 類。這個類用來包含元素本身的內容。由于這個類的 z-index 值比它的兄弟元素 .shadow-element::before 和 .shadow-element::after 要高，所以 .shadow-element-inner 中的內容會被放置在分割線的上層，從而實現兩條邊都有陰影的效果。