如何与某些空间接壤？

Question

如何与某些空间接壤？就像 -

Answer 1

使用outline属性：

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

Answer 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/

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