如何更改这些插入的大小和边界半径

Question

以下是我从Github Gist获得的汉堡菜单的代码。我想知道的是为什么最后一根杆的高度没有变化，我怎样才能在杆上添加圆角？哦，我怎样才能改变酒吧之间的高度？如果其他人有一个带有这些功能的单个汉堡包菜单的CSS，请告诉我。

＆＃13;

＆＃13;

.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);
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

使用box-shadow创建线条将阻止您对它们进行舍入。

您可以使用伪元素

.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

使用box-shadow方法无法添加border-radius，但这是另一种方法（Close hover是一个加号;）

＆＃13;

＆＃13;

*,
*: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);
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;