如何实现Div底部类方括号样式的Box Shadow？

嘿，我完全懂你想要的效果——就是在div底部做出类似方括号的阴影，而不是让阴影铺满整个左右宽度对吧？之前用普通的box-shadow导致占满整个底部区域确实挺闹心的，我这里有几个实用的方案，你可以试试看：

方案一：CSS伪元素+box-shadow（推荐） #

这个方案通过两个伪元素分别模拟方括号的左右阴影部分，能精准控制阴影的位置和形态，不会铺满整个底部：

/* 目标div的基础样式 */
.bracket-shadow-box {
  position: relative;
  width: 320px;
  height: 180px;
  background-color: #ffffff;
  margin: 60px auto;
  border: 1px solid #e5e5e5; /* 可选：加边框让结构更清晰 */
}

/* 左侧阴影伪元素 */
.bracket-shadow-box::before {
  content: "";
  position: absolute;
  bottom: -10px; /* 控制阴影与div底部的间距 */
  left: 25px; /* 控制左侧阴影的水平位置 */
  width: 50px; /* 左侧阴影的长度 */
  height: 10px; /* 阴影的高度 */
  box-shadow: 0 0 15px 4px rgba(0, 0, 0, 0.18); /* 调整阴影的模糊度和颜色 */
  border-radius: 0 0 0 5px; /* 可选：给阴影加小圆角更自然 */
}

/* 右侧阴影伪元素 */
.bracket-shadow-box::after {
  content: "";
  position: absolute;
  bottom: -10px;
  right: 25px; /* 控制右侧阴影的水平位置 */
  width: 50px;
  height: 10px;
  box-shadow: 0 0 15px 4px rgba(0, 0, 0, 0.18);
  border-radius: 0 0 5px 0;
}

调整技巧： #

• 修改bottom的值可以控制阴影和div底部的距离，数值越大阴影越靠下
• 调整left和right的值能改变方括号的开口大小，数值越大开口越宽
• 修改width可以控制左右阴影的长度，按需调整即可
• 调整box-shadow的参数：第三个值是模糊半径（数值越大阴影越柔和），第四个值是扩散半径（数值越大阴影范围越大），最后是阴影颜色

方案二：CSS渐变模拟（适合纯色阴影场景） #

如果不需要模糊的阴影效果，只是想要色块组成的方括号，也可以用线性渐变来实现：

.bracket-gradient-box {
  position: relative;
  width: 320px;
  height: 180px;
  background-color: #ffffff;
  margin: 60px auto;
  border: 1px solid #e5e5e5;
}

.bracket-gradient-box::after {
  content: "";
  position: absolute;
  bottom: -8px;
  left: 25px;
  right: 25px;
  height: 8px;
  /* 用渐变创建左右两块阴影，中间透明 */
  background: linear-gradient(to right, rgba(0,0,0,0.2) 50px, transparent 50px, transparent calc(100% - 50px), rgba(0,0,0,0.2) calc(100% - 50px));
}

这个方案更简洁，但阴影是纯色的，没有模糊效果，适合特定的设计需求。

你可以根据自己想要的视觉效果选择对应的方案，然后调整参数到符合预期的样子～

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