CSS, outline-offset: 分别设置每一边的偏移量

Question

在CSS中使用了outline。我可以单独设置每边的轮廓偏移量吗？

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

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

找遍了 MDN 但找不到任何东西。这可能吗？

Answer 1

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

.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>

CSS, outline-offset: 分别设置每一边的偏移量

CSS, outline-offset: setting the offset for each side individually

html

css

outline