Burgermenu：在其周围提供圆形边框

Question

我有以下汉堡菜单：

.bar {
  width: 25px;
  height: 3px;
  background-color: #ace1f5;
  margin: 4px 0;
}

.BurgerIcon {
  margin-right: 31px;
}

<div class="burgericon">
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
</div>

我想实现以下目标：

（请原谅我的绘画技能）。

如何实现此圆形边框？

我尝试了border-radius属性和其他一些东西，但是还没有成功。

Answer 1

使父元素内联，然后添加一些填充和边框：

.bar {
  width: 25px;
  height: 3px;
  background-color: #ace1f5;
  margin: 4px 0;
}

.burgericon {
  margin: 30px;
  display:inline-block;
  padding:10px;
  border:2px solid blue;
  border-radius:50%;
}

<div class="burgericon">
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
</div>

Answer 2

使用border-radius使您处在正确的轨道上。确保您的类定义与您的类分配匹配（.BurgerIcon与.burgericon不同）。

要获取圆圈，请提供border-radius: 50%;，然后同时添加border以及padding和width。

只要未将box-sizing设置为border-box，以下代码就可以工作。

.bar {
  width: 25px;
  height: 3px;
  background-color: #ace1f5;
  margin: 4px 0;
}

.burgericon {
  margin-right: 31px;
  border-radius: 50%;
  border: 1px solid #ace1f5;
  padding: 5px;
  width: 25px;
}

<div class="burgericon">
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
</div>

使用box-sizing:border-box;

* {
  box-sizing: border-box;
}
.bar {
  width: 25px;
  height: 3px;
  background-color: #ace1f5;
  margin: 4px 0;
}

.burgericon {
  margin-right: 31px;
  border-radius: 50%;
  border: 1px solid #ace1f5;
  padding: 5px;
  width: 37px; /* width of bar (25px) + width of padding (10px) + width of both sides border (2px) */
}

<div class="burgericon">
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
</div>

Answer 3

尝试添加此内容：

.burgericon {
    border: 1px solid #ace1f5;
    height: 25px;
    width: 25px;
    border-radius: 50%;
    padding: 10px;
}

Answer 4

您的CSS类的css文件中有错字。

这里是一个示例，该示例仅使用border-radius属性处理一些css值并弄乱了边距，您可以通过一些调整使其更漂亮

.bar {
  width: 25px;
  height: 3px;
  background-color: #ace1f5;
  margin-top:5px;
  margin-left:5px;
}

.burgericon {
    border: 2px solid blue;
    height: 35px;
    border-radius:50%;
    width: 35px;
}

<div class="burgericon">
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
</div>