防止元素的长方体阴影流出其父div

可以通过以下方法实现：

1. 使用CSS属性overflow: hidden;来限制父div的内容溢出。这会将超出父div边界的内容进行裁剪，包括阴影效果。
2. 使用CSS属性box-shadow来添加阴影效果时，可以通过设置inset关键字来使阴影内嵌到元素内部，而不会溢出父div。例如：

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

这样设置的阴影会被限制在元素内部，不会流出父div。

1. 如果需要在元素的边界之外显示阴影效果，可以使用伪元素(::before或::after)来模拟阴影，并通过设置position: absolute;和z-index属性来控制其位置和层级关系。例如：

.box {
  position: relative;
}

.box::before {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  z-index: -1;
}

这样设置的伪元素会在元素下方显示阴影效果，但不会溢出父div。

推荐的腾讯云相关产品：腾讯云云服务器（CVM） 产品介绍链接地址：https://cloud.tencent.com/product/cvm