CSS 创建一个基本的菜单图标

RetutghbxLouis 2024-07-03 11:38:04

你可以使用 CSS 来创建一个基本的菜单图标。以下是一个简单的示例：

<!DOCTYPE html>
<html>

<head>
  <style>
    /* 创建一个基本的菜单图标 */
  .menu-icon {
      width: 30px;
      height: 30px;
      border: 2px solid #000;
      border-radius: 50%;
      position: relative;
    }

    /* 添加三条横线 */
  .menu-icon:before,
  .menu-icon:after {
      content: "";
      position: absolute;
      top: 50%;
      left: 0;
      width: 100%;
      height: 2px;
      background-color: #000;
    }

  .menu-icon:before {
      transform: translateY(-50%);
    }

  .menu-icon:after {
      transform: translateY(50%);
    }
  </style>
</head>

<body>
  <div class="menu-icon"></div>
</body>

</html>

在上述代码中，我们使用 CSS 创建了一个宽度为 30 像素，高度为 30 像素的黑色边框的圆形。然后，我们使用 :before 和 :after 伪元素来添加三条横线，分别位于圆形的顶部、中间和底部。这些横线的宽度为 100%，高度为 2 像素，颜色为黑色。

...全文