在網頁設計中，我們經常會遇到需要在文字旁邊添加陰影效果的情況。這時，我們就可以使用CSS側邊陰影來實現。但是，有時候陰影的范圍可能會太大，把文字也給遮住了。這時該怎么辦呢？下面我們來看一下如何利用CSS側邊陰影將文字擋住。

.box {
width: 200px;
height: 100px;
background-color: #f8f8f8;
box-shadow: 10px 0 0 10px #999;
position: relative;
}
.box::before {
content: '';
position: absolute;
top: 0;
left: -10px;
width: 10px;
height: 100%;
background-color: #f8f8f8;
z-index: 1;
}

我們創建一個名為.box的div元素，設置其寬度為200px，高度為100px，背景顏色為#f8f8f8。然后，我們使用box-shadow屬性來創建側邊陰影，陰影距離右邊界10px，寬度為10px，顏色為#999。接下來，我們使用:before偽元素，在盒子左側創建一個高度為100%、寬度為10px的背景，顏色和盒子背景相同。這個偽元素的z-index為1，比.box的z-index小。

這樣，我們就可以將文字覆蓋在偽元素上，實現完美的陰影效果，而不會被陰影遮住。當然，我們也可以自己調整陰影和偽元素的大小和位置，根據實際情況來靈活運用。