html - parent 的盒子阴影必须忽略 child 的边距

假设我们有一个具有以下样式的简单标记:

.outer {
  box-shadow: 0 0 5px 2px red;
  padding: 2px;
}

.inner {
  margin-right: 25px;
}

<span class="outer">
  <span class="inner">Content</span>
</span>

这导致 .outer 跨度具有 .inner 的宽度，其中包括 25px 边距。我想要发生的是 .outer 让 box-shadow 分布在它自己的 width 上，不包括 inners 边距。

这可能吗？

最佳答案

如何将 box-shadow 和 padding 添加到 .inner 而不是 .outer

.inner {
  box-shadow: 0 0 5px 2px red;
  padding: 2px;
  margin-right: 25px;
}

<span class="outer">
  <span class="inner">Content</span>
</span>

关于html - parent 的盒子阴影必须忽略 child 的边距，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53222568/