CSS 圆点

CSS 是一种用于网页的样式表语言，它控制网页的布局和外观。在 CSS 中，我们可以使用各种属性和值来实现各种效果和布局。本文章将详细讲解 CSS 中如何创建圆点，并提供一些示例代码。

1. 使用有序列表（ol）和无序列表（ul）实现圆点

有序列表和无序列表是在 HTML 中用来显示项目列表的标签。我们可以使用这两个标签来实现圆点效果。

1.1 无序列表实现圆点

<!DOCTYPE html>
<html>
<head>
<style>
ul {
  list-style-type: disc;
}
</style>
</head>
<body>

<ul>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
</ul>

</body>
</html>

在这个例子中，我们使用了 list-style-type 属性来设置列表项的标记类型为圆点。disc 值表示使用实心圆点作为标记。

1.2 有序列表实现圆点

有序列表和无序列表类似，区别在于有序列表的项目会按照一定的顺序显示。我们也可以使用有序列表来实现圆点效果。

<!DOCTYPE html>
<html>
<head>
<style>
ol {
  list-style-type: decimal-leading-zero;
}
</style>
</head>
<body>

<ol>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
</ol>

</body>
</html>

在这个例子中，我们使用了 list-style-type 属性来设置列表项的标记类型为带有前导零的十进制数字。这样可以将数字标记显示为圆点。

2. 使用 ::before 伪元素实现圆点

CSS 中的伪元素可以创建并插入到指定元素的内容之前或之后。我们可以使用 ::before 伪元素来在元素前面插入一个圆点。

<!DOCTYPE html>
<html>
<head>
<style>
.circle {
  position: relative;
}

.circle::before {
  content: "";
  position: absolute;
  top: 4px;
  left: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: black;
}
</style>
</head>
<body>

<p class="circle">这是一个带有圆点的段落。</p>

</body>
</html>

在这个例子中，我们创建一个带有 circle 类的段落元素，并为该元素定义了一个 ::before 伪元素。通过设置 content 属性为空字符串，我们在该伪元素中插入了一个圆点的样式。然后通过设置 position 属性、top 和 left 属性将圆点定位到了段落的左侧。

3. 使用 background 属性实现圆点

我们可以使用 CSS 的 background 属性来实现圆点的效果，同时还可以自定义圆点的样式。

<!DOCTYPE html>
<html>
<head>
<style>
.dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: black;
}
</style>
</head>
<body>

<p>这是一个带有 <span class="dot"></span> 的段落。</p>

</body>
</html>

在这个例子中，我们创建了一个带有 dot 类的 span 元素，并为该元素定义了黑色的背景样式和圆角。然后通过设置 width 和 height 属性为相同的值，我们将这个 span 元素设置为固定的正方形，从而实现了圆点的效果。

4. 使用 CSS 伪类实现圆点

CSS 伪类可以用来匹配文档中处于特定状态的元素。我们可以使用伪类选择器来实现圆点的效果。

<!DOCTYPE html>
<html>
<head>
<style>
.circle {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: black;
}

.circle:hover {
  background-color: red;
}

.circle:active {
  background-color: green;
}
</style>
</head>
<body>

<p>当鼠标悬停在这个圆点上时，它会变成红色；当鼠标点击并按住时，它会变成绿色。</p>
<span class="circle"></span>

</body>
</html>

在这个例子中，我们创建了一个带有 circle 类的 span 元素，并为该元素定义了黑色的背景样式和圆角。然后通过为伪类选择器 :hover 和 :active 设置不同的 background-color 属性值，我们可以在不同状态下改变圆点的颜色。