在div的边框周围添加边框间距

Question

我有一个使用border-radius: 50%进行循环的div，我也想实现的是模仿已经在悬停上实现的功能。

边界和div之间的间距。

我尝试将padding: 5px添加到悬停中，但是它不会创建不在div上的边框。

代码

#sub-section .content .icon-div {
  background-color: rgba(204, 202, 202, 0.25);
  border-radius: 50%;
  width: 90px;
  height: 90px;
  margin-right: auto;
  margin-left: auto;
  text-align: center;
  padding-top: 13%;
  margin-bottom: 2em;
  transition: all ease .3s;
}

#sub-section .content .icon-div:hover {
  border: 1px solid #f6653c;
  background-color: #f6653c;
  padding: 5px;
  transition: all ease .3s;
}

Answer 1

这是一个使用插图box-shadow的快速示例，因为与动画填充相比，它不太可能使您的布局混乱：

（请记住，这不是真正的透明性，白色的内圈是固定的颜色，可能会或可能不会满足您的需求）

#example{
  display: block;
  width: 100px;
  height: 100px;
  color: #FFF;
  text-align: center;
  line-height: 100px;
  background-color: #f6653c;
  border: 2px solid #f6653c;
  border-radius: 50%;
  box-shadow: inset 0px 0px 0px 0px rgba(255,255,255,1);
  transition: box-shadow 0.2s linear;
}
#example:hover{
  box-shadow: inset 0px 0px 0px 5px rgba(255,255,255,1);
}

<div id="example">Hover me</div>

Answer 2

您可以使用径向渐变：

div {
  width: 120px;
  height: 120px;
  border-radius:50%;
  border:1px solid #FA532A;
}

.simple-radial {
  background: radial-gradient(#FA532A 54px, rgba(204, 202, 202, 0.25) 2px, white 4px);
}

<div class="simple-radial"></div>