如何更改这些插图的大小和边框半径

Question

下面是我从Github Gist获得的汉堡菜单的代码。我想知道的是为什么最后一个条形的高度没有变化，如何在条形上添加圆角？哦，我怎样才能改变条形之间的高度？如果其他人将CSS连接到具有这些功能的单个div汉堡菜单，请告诉我。

.hamburger {
display: block;
position: absolute;
top: .5em;
right: .5em;
height: 2.5em;
width: 2.5em;
border: .8em solid rgba(0,133,255,1);
box-shadow: 0 0 0 .1em rgba(255,255,255,0),
inset 0 .3em 0 0 rgba(255,255,255,1),
inset 0 1em 0 0 rgba(0,133,255,1),
inset 0 1.3em 0 0 rgba(255,255,255,1),
inset 0 2em 0 0 rgba(0,133,250,1),
inset 0 2.5em 0 0 rgba(255,255,255,1);
}

<div class="hamburger"></div>

Answer 1

这里有一个给你的。您可以根据需要调整圆度，厚度和颜色。

.menu {
position: relative;
display: inline-block;
width: 30px;
height: 5px;
top:  0px;
border-radius: 5px;
background: #000;
margin: 0;
}
.menu::before {
content: "";
position: absolute;
top: 10px;
left: 0px;
width: 30px;
height: 5px;
border-radius: 5px;
background: #000;
}
.menu::after {
content: "";
position: absolute;
top: 20px;
left: 0px;
width: 30px;
height: 5px;
border-radius: 5px;
background: #000;
}

<div class="menu"></div>

我最初让这个动画到一个十字架上。没有动画，您可以减少代码。

Answer 2

创建带有框阴影的线条将阻止您对其进行舍入。

您可以改用伪元素

.hamburger-menu
{
width:30px;
height:5px;
background-color:#111;
border-radius:5px;
position:relative;
}
.hamburger-menu:after, .hamburger-menu:before
{
content: '';
width: 100%;
height:5px;
background-color:#111;
position:absolute;
border-radius:5px;
}
.hamburger-menu:after
{
top:10px;
}
.hamburger-menu:before
{
top:20px;
}

<div class="hamburger-menu">    </div>

Answer 3

使用框阴影方法，无法添加边框半径，但这是另一种方法(关闭悬停是一个加号;))

*,
*:after,
*:before {
margin: 0;
padding: 0;
-webkit-box-sizing: inherit;
box-sizing: inherit;
-webkit-transition: all ease 0.3s;
transition: all ease 0.3s;
}
*:hover,
*:after:hover,
*:before:hover {
-webkit-transition: all ease 0.3s;
transition: all ease 0.3s;
}
.right {
background: #000;
padding: 10px;
}
.right .bar {
width: 40px;
margin: auto;
border-radius: 2px;
height: 8px;
margin-top: 5px;
display: block;
background: #fff;
}
.right:hover .container-bar {
-webkit-transform: translateX(10px);
transform: translateX(10px);
}
.right:hover .bar {
width: 40px;
margin: auto;
height: 8px;
margin-top: 5px;
display: block;
background: #fff;
}
.right:hover .bar:nth-child(1) {
-webkit-transform-origin: left top;
transform-origin: left top;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.right:hover .bar:nth-child(2) {
opacity: 0;
}
.right:hover .bar:nth-child(3) {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}

<div class="right triggerMenu">
<div class="container-bar">
<a href="javascript:void(0);">
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
</a>
</div>
</div>