代码之家 › 专栏 › 技术社区 › Willem van der Veen

CSS,轮廓偏移:分别设置每边的偏移

outline css3 css html

-1

Willem van der Veen · 技术社区 · 7 年前

在CSS中使用 outline

我不想在元素中添加填充(或任何其他内容)。

以下是我的意思的视觉表现:

1 回复 | 直到 7 年前

1

2

Temani Afif 7 年前

使用伪元素,可以使用边框轻松控制空间和大小:

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