如何在不使用额外元素或双层box-shadow的情况下实现box-shadow偏移？

当然有办法！你想要的这种「围绕元素居中的外围边框/阴影」效果，完全可以不用伪元素、额外元素，也不需要依赖背景色来规避双层阴影的间隙问题，用 clip-path 就能完美解决。

思路解析 #

核心逻辑很简单：

• 先把元素的尺寸设为你想要的外围阴影/边框的整体大小（比如示例里的 12px×12px）
• 给元素设置目标样式的 box-shadow
• 最后用 clip-path: inset() 裁剪掉元素的外围区域，只保留中间和原元素尺寸一致的部分（比如示例里要保留8px×8px的蓝色方块，就上下左右各裁剪2px）

这样一来，box-shadow 会完整显示在外围，中间只保留你需要的元素背景，完全不需要依赖背景色填充间隙，也不用额外元素。

代码示例 #

body { background: #34495e; }
div {
  width: 12px;
  height: 12px;
  background: #3498db;
  box-shadow: 0 0 0 2px #e74c3c;
  /* 裁剪掉上下左右各2px，只保留中间8x8的核心区域 */
  clip-path: inset(2px);
}

<div></div>

方案优势 #

• clip-path 仅裁剪元素的可见区域，不会影响外部 box-shadow 的渲染
• 完全不需要知晓页面背景色，不存在双层阴影方案的间隙问题
• 严格符合你的要求：未使用伪元素、额外元素，也没有依赖双层 box-shadow

如果需要调整阴影大小或元素尺寸，只对应修改 clip-path 的参数和元素宽高即可，灵活性拉满。

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