有時候在使用 CSS 給元素添加陰影效果時，會發現陰影被其它元素遮擋，導致效果不理想。

.box {
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

例如，我們有一個類名為.box 的 div 元素，我們想要為它添加一個陰影效果。在 CSS 中，我們可以使用 box-shadow 屬性實現，如上方代碼所示。

然而，如果這個 div 元素被其它元素遮擋，陰影就會被隱藏。具體的情況可能由其它元素的層級、顏色、透明度等因素造成。

解決這個問題的方法有兩種：

方法一：提高元素層級

.box {
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
z-index: 1; /* 提高元素層級 */
}

通過為元素添加 z-index 屬性，可以提高它的層級，讓它處于其它元素之上。這樣就可以避免陰影被遮擋的問題。

方法二：將陰影效果作為偽類實現

.box {
position: relative;
}
.box::before {
content: "";
position: absolute;
top: -10px;
left: -10px;
right: -10px;
bottom: -10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
z-index: -1;
}

這種方法比較巧妙，通過使用偽類（::before 或 ::after）來實現陰影效果。首先，我們需要給元素添加 position: relative 屬性來作為定位基準。

然后，使用 ::before 偽類為元素創建一個新的元素，在其中添加陰影效果。注意這個偽類元素需要使用絕對定位，并覆蓋整個元素，遮擋在它下方的元素。

最后，通過設置該偽類元素的 z-index 為 -1，將其放置在元素下方。

這兩種方法都能有效解決 CSS 陰影被遮擋的問題。我們可以根據具體情況選擇使用哪種方法。