CSS 如何使用CSS制作3个垂直点

在本文中，我们将介绍如何使用CSS来制作3个垂直点的效果。这种效果常常用于表达更多选项的意思，比如下拉菜单中的更多选项，或者表示某个元素有额外的功能。下面我们将逐步介绍如何实现这个效果。

阅读更多：CSS 教程

使用伪元素 ::before 和 ::after

我们可以使用CSS中的伪元素 ::before 和 ::after 来创建这三个垂直点。我们可以使用伪元素的 content 属性来插入Unicode字符，如水平省略号（U+2026）或者竖直省略号（U+22EE）。下面是一个例子：

.dot {
  position: relative;
  display: inline-block;
  width: 2px;
  height: 2px;
  background-color: black;
}

.dot::before,
.dot::after {
  content: "2026";
  position: absolute;
  top: 8px;
  left: 0;
}

在上面的例子中，我们使用 .dot 类来表示垂直点。我们设置了其宽高为2px，并将背景颜色设为黑色。然后我们使用伪元素 ::before 和 ::after 来插入水平省略号字符。将它们的内容属性设置为”2026″，这是水平省略号的Unicode编码。我们还将它们的位置设为绝对定位，并让它们在父元素的中间位置。

使用伪元素内容为空和边框

除了使用Unicode字符来插入垂直点，我们还可以使用空内容和边框来实现相同的效果。下面是一个例子：

.dot {
  position: relative;
  display: inline-block;
  width: 2px;
  height: 8px;
}

.dot::before,
.dot::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: black;
}

.dot::after {
  top: 4px;
}

在上面的例子中，我们同样使用 .dot 类来表示垂直点。我们设置了其宽度为2px，高度为8px。然后我们使用伪元素 ::before 和 ::after 来代表两个垂直点。我们将它们的内容属性设为空，将它们的位置设为绝对定位，并设置它们的宽度和高度。其中，::after 伪元素的 top 属性设为4px，这样就实现了上下两个点之间的间距。

使用背景图片

除了使用伪元素来实现垂直点效果，我们还可以使用背景图片来实现。下面是一个例子：

.dot {
  position: relative;
  display: inline-block;
  width: 6px;
  height: 6px;
  background-image: url("dots.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

在上面的例子中，我们使用 .dot 类来表示垂直点。我们设置了其宽高为6px，并通过 background-image 属性指定了一个名为 dots.png 的背景图像。我们设置背景图像的尺寸为100% 100%，并禁止背景图像的重复。这样就可以通过一张背景图像来实现三个垂直点的效果。