[分享]css3实现三横线

CSS3是一种用于网页设计的语言，可以实现许多视觉效果，其中包括常见的三横线图标。三横线图标通常用于网页导航栏的折叠和展开，非常实用。本文将介绍如何使用CSS3来实现三横线的效果。// CSS代码 m...

CSS3是一种用于网页设计的语言，可以实现许多视觉效果，其中包括常见的三横线图标。三横线图标通常用于网页导航栏的折叠和展开，非常实用。本文将介绍如何使用CSS3来实现三横线的效果。

// CSS代码
#menu {
  display: block;
  width: 30px;
  height: 20px;
  position: relative;
}

#menu span {
  display: block;
  width: 100%;
  height: 3px;
  background: #000;
  position: absolute;
  top: 0;
  left: 0;
}

#menu span:nth-child(2) {
  top: 50%;
  margin-top: -1.5px;
}

#menu span:nth-child(3) {
  bottom: 0;
} 

首先，我们需要在HTML文件中添加一个元素（如div）并设置一个ID，以便在CSS中引用。我们将其命名为“menu”。接下来，我们需要创建三个span元素作为横线。每个SPAN元素都有相同的宽度和高度，并被相对定位到其父元素上。第一个SPAN的顶部与父元素的顶部对齐，第二个SPAN在父元素的中央，第三个SPAN在父元素的底部。

我们可以通过选择器“#menu span”为所有SPAN元素设置相同的样式。每个SPAN元素都有相同的宽度和高度，并使用黑色背景。

接下来，我们使用nth-child选择器为第二个和第三个SPAN元素添加一些样式。我们将第二个SPAN元素的顶部与其父元素的中央对齐，将第三个SPAN元素的底部与其父元素的底部对齐。

以上就是使用CSS3实现三横线的方法，非常简单易懂。如果您在实现过程中遇到了问题，请参考上方的CSS代码。