CSS在填充圆周围悬停时创建边框，圆和边框之间留有空白

我有一个问题，创建这些元素与CSS只。我已经创建了一个白色的小圆圈。但是我希望这个圆在

：hover

效果上有一个白色的圆形边框

这就是它在

：hover

上的外观：

我在这里找到了一些想法，但似乎都不管用。我试着使用

轮廓

，但最后我觉得必须使用

框阴影

目前，我有一个结果：

另一种解决方案是加载图像。我可以创建此图像，并将其显示在

：hover

上。但这不是最佳实践，我想知道如何通过CSS实现这一目标

---

谢谢。

使用两个方框阴影，而不是一个：

.navi.li{
宽度：8px；
高度：8px；
保证金：25px 0 25px 0；
背景色：#ffffff；
-webkit边界半径：50px；
/*狩猎，铬*/
-moz边界半径：50px；
/*火狐*/
边界半径：50px；
/*CSS3*/
}
.navi.li:悬停{
盒影：0 0 0 6px#000，0 0 0 7px#ffffff；
}
身体{
背景色：黑色；
}

使用两个方框阴影，而不是一个：

.navi.li{
宽度：8px；
高度：8px；
保证金：25px 0 25px 0；
背景色：#ffffff；
-webkit边界半径：50px；
/*狩猎，铬*/
-moz边界半径：50px；
/*火狐*/
边界半径：50px；
/*CSS3*/
}
.navi.li:悬停{
盒影：0 0 0 6px#000，0 0 0 7px#ffffff；
}
身体{
背景色：黑色；
}

您可以使用css

：在此属性之前，这里是完整的代码和工作示例

您可以使用css
：before
属性，这里是完整的代码和工作示例

FWIW您应该能够替换
框阴影：0,000,0,0,ffffff；盒影：无你可能是对的。我倾向于设置一个对转换有意义的初始值，因为我认为
none
在早期的CSS3中常常会导致问题。习惯一guess@Turnip我只是尝试了一下，事实上我很惊讶地发现他们之间有细微的差别。。。。所以我想我收回我的第一句话；）FWIW您应该能够替换
框阴影：0,000,0,0,ffffff；盒影：无你可能是对的。我倾向于设置一个对转换有意义的初始值，因为我认为
none
在早期的CSS3中常常会导致问题。习惯一guess@Turnip我只是尝试了一下，事实上我很惊讶地发现他们之间有细微的差别。。。。所以我想我收回我的第一句话；）
.navi-dots li {
    width: 8px;
    height: 8px;
    margin: 25px 0 25px 0;
    background-color: #ffffff;
    -webkit-border-radius: 50px;
    /* Safari, Chrome */
    -moz-border-radius: 50px;
    /* Firefox */
    border-radius: 50px;
    /* CSS3 */
    position:relative;
}
.navi-dots li:before {
  position:absolute;
  width:16px;
  height:16px;
  top:-6px;
  left:-6px;
  border-radius:100%;
  border:2px solid #fff;
  display:none;
  content:"";
}
.navi-dots li:hover:before {
   display:block
}

body {
  background-color: black;
}