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

Question

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

 .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

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

 *, *: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>