带有双边框的CSS圈子

Question

我刚收到设计师的PSD,大部分的部分都可以通过CSS实现,我只想做一件我觉得难以理解的是一个有2个边框的圆圈.我可以使用bg图像方法,但使用CSS3是理想的.

使用CSS的一个主要原因是在几个不同的元素上使用了相同的边框.

Answer 1

您可以使用::before或::after伪元素来创建此形状:

.btn-holder {
  background: darkgreen;
  padding: 30px;
}

.btn {
  background: transparent;
  justify-content: center;
  align-items: center;
  position: relative;
  color: #fff;
  display: flex;
  height: 100px;
  width: 100px;
}

.btn,
.btn::after {
  border: 1px solid #fff;
  border-radius: 100%;
}

.btn::after {
  position: absolute;
  content: '';
  width: 100%;
  height: 100%;
  left: 0;
  top: -4px;
}

<div class="btn-holder">
  <button type="button" class="btn">Register</button>
</div>