如何裁剪CSS box-shadow左右两侧实现目标效果？是否需用独立div？

完全不需要用两个独立div，纯CSS就能搞定，给你几种实用的方法，都能满足响应式布局且元素保持关联的需求：

方法一：用clip-path精准裁剪阴影 #

通过clip-path的inset()函数，把左右两侧的阴影直接裁掉，只保留上下部分的阴影。示例代码：

.box {
  width: 80%;
  margin: 2rem auto;
  padding: 2rem;
  background: #fff;
  /* 先设置包含上下左右的完整阴影 */
  box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 -4px 12px rgba(0,0,0,0.2);
  /* 上下方向允许阴影超出元素（负数值对应阴影扩散半径），左右方向裁剪到元素边缘 */
  clip-path: inset(-12px 0 -12px 0);
}

原理很简单：inset()的四个值分别对应「上、右、下、左」的裁剪范围，负数值让上下阴影能超出元素边界显示，左右设为0，直接把两侧的阴影裁掉。这个方法代码简洁，响应式下会自动适配元素宽度。

方法二：伪元素模拟上下阴影 #

如果担心clip-path的兼容性（主流浏览器都支持，但老IE不行），可以用伪元素单独创建上下两个阴影块，和主元素绑定：

.box {
  width: 80%;
  margin: 2rem auto;
  padding: 2rem;
  background: #fff;
  position: relative;
}

/* 上阴影伪元素 */
.box::before {
  content: '';
  position: absolute;
  top: -10px;
  left: 0;
  right: 0;
  height: 10px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

/* 下阴影伪元素 */
.box::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 0;
  right: 0;
  height: 10px;
  box-shadow: 0 -5px 15px rgba(0,0,0,0.3);
}

伪元素是主元素的子元素，会自动跟随主元素的宽度变化，完全符合响应式要求，而且兼容性更好。

方法三：overflow: hidden配合负边距 #

给父容器设置overflow: hidden，主元素左右用负边距向外延伸，让左右阴影被父容器裁掉，只留上下阴影：

.container {
  width: 80%;
  margin: 2rem auto;
  overflow: hidden;
}

.box {
  padding: 2rem;
  background: #fff;
  /* 左右负边距让阴影超出父容器范围 */
  margin: 0 -20px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.3), 0 -5px 15px rgba(0,0,0,0.3);
}

这个方法逻辑直观，父容器和主元素保持关联，响应式下宽度变化时阴影会自动适配。

内容的提问来源于stack exchange，提问作者Gardinero