CSS陰影效果給網頁加上了紋理和深度感，但當陰影超出了父元素的范圍，就會變得非常丑陋。然而，我們可以使用CSS的裁剪屬性來解決這個問題。

.parent {
position: relative;
overflow: hidden;
}
.child {
position: absolute;
width: 100%;
height: 100%;
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);
}

在上面的代碼中，我們首先將父元素的overflow屬性設置為hidden，以便隱藏超出范圍的任何東西。接下來，我們將子元素的position屬性設置為absolute，這樣我們就可以將其置于父元素的頂部。我們還給子元素設置了寬和高為100%，以及一個盒子陰影效果。這將確保陰影效果完全覆蓋子元素。

因為子元素被設置為absolute，并且父元素被設置為relative，它將基于父元素進行定位。父元素的溢出隱藏屬性將保護子元素以及其陰影效果不會超出其范圍。現在，當我們將陰影效果應用于子元素時，它將被裁剪，而不會影響整個布局。