HTML 在一个圆内创建三个垂直点（省略号）

在本文中，我们将介绍如何使用HTML和CSS来创建一个圆形容器内的三个垂直点（也称为省略号）的效果。这种效果常用于菜单、下拉列表或其他需要展示更多选项的地方。

阅读更多：HTML 教程

HTML 结构

首先，我们需要创建一个HTML结构来实现这个效果。我们可以使用无序列表（<ul>）来实现三个垂直点的效果。代码如下：

<div class="circle-container">
  <ul class="ellipsis">
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>

在上面的代码中，我们使用了一个<div>元素作为圆形容器的容器，并在其中包含了一个无序列表（<ul>）。列表项（<li>）将会被渲染为三个垂直点。

CSS 样式

接下来，我们需要使用CSS样式来实现圆形容器和垂直点的效果。首先，我们需要定义圆形容器的样式。代码如下：

.circle-container {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
}

在上述代码中，我们设置了圆形容器的宽度和高度为30像素，并通过border-radius属性将其变为圆形。我们还设置了背景颜色为黑色，并使用display: flex和align-items: center以及justify-content: center使内容垂直和水平居中。

接下来，我们需要定义垂直点的样式。代码如下：

.circle-container .ellipsis li {
  width: 5px;
  height: 5px;
  background-color: #fff;
  list-style: none;
  margin: 4px 0;
  border-radius: 50%;
}

在上述代码中，我们设置了垂直点的宽度和高度为5像素，并设置背景颜色为白色。我们还使用list-style: none来去除默认的列表样式，使用margin属性来设置垂直点的间距，最后使用border-radius属性将其设置为圆点。

示例

现在，我们已经完成了HTML结构和CSS样式的设计，让我们来看看最终效果：

<!DOCTYPE html>
<html>
<head>
  <title>Three Vertical Dots</title>
  <style>
    .circle-container {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background-color: #000;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .circle-container .ellipsis li {
      width: 5px;
      height: 5px;
      background-color: #fff;
      list-style: none;
      margin: 4px 0;
      border-radius: 50%;
    }
  </style>
</head>
<body>
  <div class="circle-container">
    <ul class="ellipsis">
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </div>
</body>
</html>