如何在悬停时增加边框宽度而不移动 CSS 中的 div 位置

Question

我试图让它悬停在圆形div 上会导致厚虚线边框向外辐射，同时将内部区域保持在同一个位置。（这个想法是给人一种盛开的花朵的印象。到目前为止，我尝试的所有方法都导致中心移动以适应边框宽度的增加。有没有办法用纯 CSS 完成我想要的？

这是我正在使用的：

#f {
    left:10px;
    top:10px;
    position:fixed;
    border:10px dotted #0db;
    border-radius:50%;
    width:43px;
    height:43px;
    -webkit-transition: border .4s ease-in;
    -moz-transition: border .4s ease-in;
    -o-transition: border .4s ease-in;
}
#f:hover {
    border:40px dotted #fb0;
}

Answer 1

使用outline，而不是broder。

#f {
  width: 100px;
  padding: 15px;
  background: #eee;
  border-radius: 10px;
  color: Grey;
  text-align: center;
  outline: 2px solid silver;
  transition: .1s linear;
  cursor: pointer;
}
#f:hover {
  outline: 5px solid #fb0;
  transition: .1s linear;
}

<div id="f">Button</div>

2022 年新编辑：border-radius将在 2022 年与outline合作

旧编辑：好吧，看来我的错误，border-radius行不通 outline . outline适用于方盒。

有一个-moz-outline-radius，但仅适用于Mozilla Firefox。 box-shadow是另一种方式，但将其用于厚边界。

在这种情况下，outline而不是使用LGSon的box-sizing:border-box溶液。

Answer 2

最简单的方法是设置box-sizing: border-box;并使用边框现在设置的宽度增加元素大小。

由于box-sizing: border-box;使边框宽度在元素的大小范围内，因此它将在调整边框大小时保持其大小。

旁注：

不要忘记将不带前缀的transition: border .4s ease-in;添加到规则中。

还要注意，Firefox和Edge/IE11中的虚线边框看起来与Chrome中的不同。

FF实际上根本没有显示它，虚线边框在Firefox中没有显示

#f {
  left:10px;
  top:10px;
  position:fixed;
  box-sizing: border-box;
  border:10px dotted #0db;
  border-radius:50%;
  width:53px;
  height:53px;
  -webkit-transition: border .4s ease-in;
  -moz-transition: border .4s ease-in;
  -o-transition: border .4s ease-in;
  transition: border .4s ease-in;
}
#f:hover {
  border: 20px dotted #fb0;
}

<div id="f"></div>

Answer 3

2022 年的答案：

@AvikB的回答是正确的。

大纲现在在 2022 年使用边界半径。

以下是要点：

#f {
  width: 100px;
  height: 20px;
  background: blue;
  border-radius: 10px;
  color: white;
  text-align: center;
}
#f:hover {
  outline: 2px solid red;
}

<div id="f">button</div>

如您所见，在不改变框大小的情况下，轮廓比边框好得多。