我正在尝试使其悬停在圆形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;
}
最简单的方法是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>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句