如何获得一些空间的边界？ [复制]答案

【问题标题】：How to get border with some space? [duplicate]如何获得一些空间的边界？ [复制]
【发布时间】：2015-07-26 03:07:39
【问题描述】：

如何获得一些空间的边框？就像-

【问题讨论】：

您实际上不需要任何额外的元素或轮廓等。带有一些填充的纯边框和background-clip 绰绰有余。 Here 是一个示例。没有添加答案，因为我记得之前有一个类似的问题。
Here 是我所指的问题。

标签： css

【解决方案1】：

使用大纲属性：

outline: 2px solid red;
outline-offset: 3px;

【讨论】：

【解决方案2】：

如果没有边框，仅轮廓是不够的。

但您可以设置边框以匹配您的相应背景颜色：

#test{
  background: red;
  border: 2px solid white;
  outline: 2px solid red;    
}

https://jsfiddle.net/dntbn733/

对于圆角，您可以包装一些 div 来实现相同的效果：

.red{
    background-color:red;
    padding:2px;
    border-radius:10px;
}

.white {
    background-color:white;
    padding:2px;
    border-radius:10px;
}

<div class="red">
    <div class="white">
        <div class="red">        
            test
        </div>
    </div>
</div>

https://jsfiddle.net/dteqogos/

【讨论】：

试着把 div 的边框弄圆，看看会发生什么。
@j08691 tc 要求“带空格的边框”-而不是“带空格和圆角的边框”:)

【解决方案3】：

您可以通过简单地使用 CSS :before 或 :after 选择器来实现这一点。

#borderer {
  background: red;
  border: 10px solid white; 
  border-radius: 50%;
  width: 140px;
  height: 140px;
  line-height: 140px;
  text-align: center;
  vertical-align: middle;
  font-size: 88px;
  font-weight: bold;
  font-family: calibri;
  position: relative;
  margin: 50px auto;
}

#borderer:after {
  width: 170px;
  height: 170px;
  position: absolute;
  background: red;
  border-radius: 50%;
  content: '';
  left: -15px;
  top: -15px;
  z-index: -1;
  
  }

<div id="borderer">

2
</div>

【讨论】：