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

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

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

附注：

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

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

FF实际上根本没有显示它，Dashed border not showing in 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 2

使用outline，由布鲁德提出。

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

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

编辑：好吧，好像我的错误，border-radius无效outline。方框的outline很好。

有一个-moz-outline-radius但只适用于mozilla firefox。 box-shadow是另一种方式，但将它用于厚边框很棘手。

在这种情况下，而不是outline使用LGSon的box-sizing:border-box解决方案。

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

2 个答案: