如何为Box或Div设置仅左右两侧的内部Box Shadow？

嘿，这个需求我之前做项目时刚好遇到过，用CSS的box-shadow就能完美解决，核心是精准调整阴影参数，让它只在左右两侧显示内部阴影～

核心思路 #

内部阴影需要用到inset关键字，然后通过控制水平偏移、扩散半径这两个参数，把上下方向的阴影“压缩”掉，只保留左右两侧的效果。

具体代码实现 #

先看CSS代码：

/* 定义带左右内部阴影的盒子 */
.side-inset-shadow {
  width: 350px;
  height: 250px;
  background-color: #ffffff;
  padding: 20px;
  /* 左侧内部阴影 + 右侧内部阴影 */
  box-shadow: 
    inset 6px 0 12px -4px rgba(0, 0, 0, 0.25),
    inset -6px 0 12px -4px rgba(0, 0, 0, 0.25);
}

对应的HTML结构：

<div class="side-inset-shadow">
  这里是盒子的内容，你可以看到只有左右两侧有内部阴影哦～
</div>

参数拆解说明 #

我来给你拆解一下每个参数的作用，方便你按需调整：

• inset：标记这是内部阴影（默认是外部阴影）
• 第一个阴影（左侧）：6px 0 12px -4px rgba(0,0,0,0.25)
  • 6px：水平偏移量（正数向右，inset模式下会在盒子左侧生成阴影）
  • 0：垂直偏移量（上下方向不偏移）
  • 12px：阴影模糊半径（值越大阴影越柔和）
  • -4px：扩散半径（负数会让阴影向内收缩，避免扩散到上下边缘）
  • rgba(0,0,0,0.25)：半透明黑色阴影（最后一个值是透明度，0-1之间调整）
• 第二个阴影（右侧）：-6px 0 12px -4px rgba(0,0,0,0.25)
  • 只是把水平偏移改成了-6px（正数向右，负数向左，inset模式下对应右侧内部阴影），其他参数和左侧一致

自定义调整技巧 #

• 想要阴影更明显：可以把模糊半径调大（比如15px），或者提高透明度（比如0.4）
• 想要阴影更窄：减小水平偏移量（比如4px）和模糊半径（比如8px）
• 如果盒子有边框：可以把扩散半径的绝对值调大一点，避免阴影被边框遮挡

这个方案兼容性拉满，所有现代浏览器都支持，不需要额外的hack～

内容的提问来源于stack exchange，提问作者Ashik K H