圈内空心圈：之前

Question

我非常需要你的帮助:)我在css中很糟糕，我需要两个类一个用于链接，一个用于活动链接。链接类必须是一个空心圆圈我得到了这个：

  &:before {
    content: '';
    margin-right: 0.75rem;
    display: inline-block;
    vertical-align: -50%;
    border-radius: 50%;
    border: 0.3rem solid #ffffff;
    width: 2rem;
    height: 2rem;
  }

但如何获得有效结果？圆圈内圈？在一个伪元素？非常感谢您的任何建议：）

Answer 1

您可以在css中使用径向渐变

删除边框并在以下位置使用此行：

background:radial-gradient( white 20% , rgb(6, 42, 64) 21% , rgb(6, 42, 64) 47% , white 48% );

另请参阅下面的示例，除了具有不同背景的所有内容之外，容器不会用于：之前

HTML

<div class="container"></div>

CSS

.container
{
  display:inline-block;
  width:100px;
  height:200px;
  position:relative;
  background-color:#062a40;
}

.container:before
  {
    content:" ";
    width:50px;
    height:50px;
    position:absolute;
    top:50%;
    left:50%;
    transform:translate3d(-50%,-50%,0);
    border-radius:50%;
    background: -webkit-radial-gradient( white 20% , rgb(6, 42, 64) 21% , rgb(6, 42, 64) 47% , white 48% );
    background: -o-radial-gradient( white 20% , rgb(6, 42, 64) 21% , rgb(6, 42, 64) 47% , white 48% );
    background: -moz-radial-gradient( white 20% , rgb(6, 42, 64) 21% , rgb(6, 42, 64) 47% , white 48% );
    background: radial-gradient( white 20% , rgb(6, 42, 64) 21% , rgb(6, 42, 64) 47% , white 48% );
  }

您可以通过更改径向渐变颜色百分比来自定义它，也不要忘记添加浏览器前缀