CSS，outline-offset：单独设置每一边的偏移量

Question

在 CSS 中使用outline. 我可以单独设置每一侧的轮廓偏移吗？

我不想向我的元素添加填充（或任何其他内容）。

这是我的意思的直观表示：

查遍了MDN，但没有找到任何东西。这可能吗？

Answer 1

使用伪元素，您可以使用边框轻松控制空间和大小：

.outline {
  padding: 10px;
  display: inline-block;
  position:relative;
  margin:20px;
  background:rgba(0,0,0,.2);
}
.outline:before {
  content:"";
  position:absolute;
  left:-10px;
  right:-20px;
  top:-5px;
  bottom:-5px;
  border:2px solid;
  border-right-width:4px;
  border-left-width:5px;
}

<div class="outline">
  Content
</div>