css - 如何在不移动 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 一起使用

Old Edit: Ok it seems my mistake, border-radius won't workoutline. outline is fine for square boxes.

There is a -moz-outline-radius but only for mozilla firefox.box-shadow is another way but it is tricky to use it for thickborders.

In this case instead of outline use LGSon's box-sizing:border-boxsolution.