CSS怎么换圆圈？CSS列表样式与自定义圆形标记教程

在网页开发中，无序列表的默认圆圈标记很多时候无法满足设计需求，开发者需要通过CSS调整列表的圆圈样式，既可以修改原生标记的类型，也可以实现完全自定义的圆形效果。不同的实现方式适用不同的场景，下面会逐一讲解具体的操作方法。

一、使用原生list-style-type属性切换圆圈样式

CSS原生的list-style-type属性可以直接控制无序列表的标记样式，无需额外编写复杂代码，适合只需要切换基础圆圈类型的场景。

1. 基础属性取值

无序列表常用的圆圈相关取值如下：

• disc：默认值，实心圆圈
• circle：空心圆圈
• square：实心正方形（部分场景下可替代特殊圆形需求）

2. 代码示例

下面的代码演示了如何给不同列表设置不同的圆圈样式：

/* 默认实心圆圈 */
ul.default-circle {
    list-style-type: disc;
}

/* 空心圆圈 */
ul.hollow-circle {
    list-style-type: circle;
}

/* 实心正方形 */
ul.square-mark {
    list-style-type: square;
}

对应的HTML结构如下：

<ul class="default-circle">
    <li>默认实心圆圈项1</li>
    <li>默认实心圆圈项2</li>
</ul>

<ul class="hollow-circle">
    <li>空心圆圈项1</li>
    <li>空心圆圈项2</li>
</ul>

<ul class="square-mark">
    <li>正方形标记项1</li>
    <li>正方形标记项2</li>
</ul>

二、使用伪元素自定义圆形标记

如果原生的圆圈样式无法满足设计需求，比如需要指定圆圈的颜色、大小、边框样式，或者需要圆圈内包含图标、数字等内容，可以使用伪元素::before来实现完全自定义的圆形标记。

1. 实现思路

首先需要将列表原生的标记隐藏，然后通过伪元素在列表项前面生成自定义的内容，再通过CSS把伪元素设置为圆形，调整到合适的位置即可。

2. 完整代码示例

下面的代码实现了一个蓝色边框、内部有数字的自定义圆形标记：

/* 隐藏原生列表标记 */
ul.custom-circle-list {
    list-style-type: none;
    padding-left: 0;
}

/* 列表项基础样式 */
ul.custom-circle-list li {
    position: relative;
    padding-left: 40px;
    margin-bottom: 12px;
    line-height: 32px;
}

/* 自定义圆形标记 */
ul.custom-circle-list li::before {
    content: counter(custom-num); /* 显示计数器内容 */
    counter-increment: custom-num; /* 计数器自增 */
    position: absolute;
    left: 0;
    top: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%; /* 设置为圆形 */
    border: 2px solid #409eff; /* 蓝色边框 */
    color: #409eff; /* 文字颜色 */
    text-align: center;
    line-height: 32px; /* 文字垂直居中 */
    font-size: 14px;
    background-color: #ecf5ff; /* 浅蓝色背景 */
}

/* 初始化计数器 */
ul.custom-circle-list {
    counter-reset: custom-num 0;
}

对应的HTML结构如下：

<ul class="custom-circle-list">
    <li>自定义圆形标记项1</li>
    <li>自定义圆形标记项2</li>
    <li>自定义圆形标记项3</li>
</ul>

3. 代码说明

这里用到了CSS计数器counter-reset和counter-increment来实现自动编号，如果你不需要编号，只需要把伪元素的content属性设置为空字符串""，再调整圆圈的样式即可，比如改成纯色实心圆：

ul.solid-custom-circle li::before {
    content: "";
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #f56c6c;
    top: 50%;
    transform: translateY(-50%);
}

三、两种方式的适用场景对比

为了帮助开发者选择合适的方式，下面整理了两种实现方式的对比：

四、注意事项

• 使用伪元素自定义标记时，一定要先设置list-style-type: none隐藏原生标记，避免出现双重标记的问题。
• 如果自定义圆圈的position设置为absolute，需要给列表项设置position: relative作为定位父级，同时预留足够的padding-left空间，避免文字和标记重叠。
• 圆形效果的核心是border-radius: 50%，只要元素的宽高相等，设置这个属性就能得到正圆形，宽高不等则会得到椭圆形。

通过上述两种方法，基本可以覆盖所有CSS修改列表圆圈样式的需求，开发者可以根据实际场景选择对应的实现方式，快速完成列表样式的定制。

CSSlist-style-type伪元素custom_counter修改时间：2026-06-23 08:54:31