防止元素的阴影超出其父div的边界

可以使用CSS的overflow属性来解决元素阴影超出父div边界的问题。

示例代码如下所示：

HTML：

<div class="parent">
  <div class="child">Hello World</div>
</div>

CSS：

.parent {
  width: 200px;
  height: 200px;
  overflow: hidden;
  background-color: lightgray;
}

.child {
  width: 300px;
  height: 300px;
  padding: 20px;
  background-color: white;
  box-shadow: 0 0 10px gray;
}

在上面的示例中，父div的宽度和高度都设置为200px，并且overflow属性被设置为hidden，这样就限制了子div的内容超出其边界的显示。子div的宽度和高度都设置为300px，并且添加了一个10px的阴影效果，但由于父div的限制，阴影效果不会超出父div的边界。

这样做的原理是通过将父div的overflow属性设置为hidden，将超出父div边界的内容进行裁剪，从而防止阴影超出父div的显示范围。

通过这种方法，可以确保阴影效果不会超出父div的边界，从而保持页面的整洁和美观。