如何在不移动css中的div位置的情况下增加悬停时的边框宽度？

我试着让它在一个圆形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;
}

---

使用

大纲

，而不是布罗德

#f {
outline:10px dotted #0db;
}

#f:hover {
outline:40px dotted #fb0;
}

编辑：好吧，看来我搞错了，

边框半径

不起作用

轮廓

<代码>轮廓适用于方形框

有一个

-moz轮廓半径

，但仅适用于mozilla firefox

box shadow

是另一种方法，但在厚边框上使用它很难

---

在这种情况下，使用LGSon的

框大小：边框框

解决方案，而不是

大纲

。

最简单的方法是设置

框大小：边框框并使用边框现在设置的宽度增加元素大小

自<代码>框大小：边框框使边框宽度在元素的大小范围内，它将使其大小保持在边框大小上

旁注：

别忘了添加无前缀的
转换：border.4s ease in符合您的规则

还要注意的是，Firefox和Edge/IE11中的虚线边框与Chrome中的不一样

实际上，FF根本没有显示出来


#f{
左：10px；
顶部：10px；
位置：固定；
框大小：边框框；
边框：10px虚线#0db；
边界半径：50%；
宽度：53px；
高度：53px；
-webkit过渡：border.4s易用性；
-moz过渡：边界。4s易用；
-o型过渡：边界。4s容易进入；
过渡：边界。4s放松；
}
#f:悬停{
边框：20px点#fb0；
}
这不起作用，因为
大纲
没有遵循
边界
当有
边界半径
@LGSon thaks时，我完全忘记了：我已经更新了指向您的解决方案的答案。