如何偏移box shadow，使其与关联元素之间保持间距？

嘿，这个问题我之前也踩过坑，一开始确实会疑惑——默认的内阴影就是紧贴元素边缘的，咋才能留出空隙呢？不过别担心，有两种靠谱的方案能实现你要的效果，而且都不复杂：

方法1：同色Border快速搞定 #

这是最简单的路子，利用同色border把内阴影“挤开”，自然留出间距。比如你要左边的内阴影和内容之间有10px空隙，只需要给元素加个和背景色一致的左border，再调整内阴影偏移就行：

.your-element {
  /* 假设元素背景是白色 */
  background-color: #ffffff;
  /* border宽度就是你要的间距 */
  border-left: 10px solid #ffffff;
  /* 内阴影偏移按需调整 */
  box-shadow: inset 5px 0px 0px 0px rgba(0,0,0,0.75);
}

原理很直白：内阴影是贴着元素border内侧绘制的，同色border占了空间，阴影和实际内容之间就自然拉开距离了。

方法2：伪元素法（更灵活） #

如果你的布局比较复杂——比如需要多方向间距，或者不想改动元素的border/padding，伪元素就是更好的选择。思路是给原元素加个绝对定位的伪元素，在伪元素上设置内阴影，再通过定位值控制伪元素和原元素的间距：

.your-element {
  position: relative;
  /* 用padding给伪元素预留空间，也可以用margin，看布局需求 */
  padding: 10px;
  background-color: #ffffff;
}

.your-element::before {
  content: "";
  position: absolute;
  /* 定位值和padding一致，就是你要的间距 */
  top: 10px;
  left: 10px;
  right: 10px;
  bottom: 10px;
  box-shadow: inset 5px 0px 0px 0px rgba(0,0,0,0.75);
  /* 避免伪元素干扰原元素的点击交互 */
  pointer-events: none;
}

这个方法完全不影响原元素的盒模型，适合复杂布局场景。

关于你问的“是否有遗漏的CSS属性” #

其实box-shadow本身并没有专门控制“阴影与元素间距”的属性——它的偏移参数是控制阴影相对于元素边缘的位置，而非和内容的间距。但通过结合border、伪元素、padding这些基础属性，我们就能间接实现这个效果。

所以结论是：完全可行，上面两种方法都能解决你的问题～

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