CSS，轮廓偏移：分别设置每侧的偏移量

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>