代码之家 › 专栏 › 技术社区 › Willem van der Veen

汉堡包菜单:提供圆形边框

css html

Willem van der Veen · 技术社区 · 7 年前

我有以下汉堡菜单:

.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 财产和其他一些东西,但还没有成功。

4 回复 | 直到 7 年前

wlh 7 年前

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>

Temani Afif 7 年前

将父元素设为inline块,然后添加一些填充和边框:

.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>

secretnative 7 年前

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

chevybow 7 年前

下面是一个示例,只需使用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>

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

8 月前

Jamie · 在CSS链接的文件名中添加Jinja占位符

8 月前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

8 月前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

8 月前

Reegan · 使用Angular ngFor指令在html中渲染嵌套对象值

8 月前

wqyutv · 当找不到文件时,任何破坏错误的东西都不会出现,我该怎么解决这个问题?

9 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

9 月前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

9 月前

Lorenzo Bertolaccini · 在Angular项目中通过对话框后,在控制台中显示但在HTML中不显示的数据数组

9 月前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

9 月前