如何在 CSS 中为数字添加圆圈？

2025年1月22日 | 阅读时长 5 分钟

在本文中，我们将通过各种示例了解如何使用 CSS 为数字添加圆圈。我们可以使用 CSS 的 border-radius、height 和 width 属性在数字周围添加圆圈。

以下是在数字周围添加圆圈的各种示例。

示例 1

<! DOCTYPE html>
<html>
  <head>
meta charset = "UTF-8" />
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
  <meta http-equiv = "X-UA-Compatible" content = "ie=edge">
    <title> How to add a Circle around a number in css </title>
   <style>
      :root {
  --color: #103;
  --direction: center;
  --distance: 15;
}
html {
    font-size: 15px;
    font-family: sans-serif;
}
body { 
  text-align: center;
  padding: 40px;
background: linear-gradient(124deg, #ff9200, #e81e1d, #e8b71d, #e9e81d, #1d9840, #1d9dde8, #2b1de8, #dd00f3, #dd00f3);
background-size: 1900% 1800%;
font-family: "Lucida Console", "Courier New", monospace;
-webkit-animation: rainbow 18s ease infinite;
-z-animation: rainbow 17s ease infinite;
-o-animation: rainbow 17s ease infinite;
  animation: rainbow 17s ease infinite; }
@-webkit-keyframes rainbow {
    0% { background-position: 0% 85% }
    50% { background-position: 100% 29% }
    100% { background-position: 0% 72% }
}
@-moz-keyframes rainbow {
    0% { background-position: 0% 85% }
    50% { background-position: 100% 29% }
    100% { background-position: 0% 72% }
}
@-o-keyframes rainbow {
    0% { background-position: 0% 85% }
    50% { background-position: 100% 29% }
    100% { background-position: 0% 72% }
}
@keyframes rainbow { 
    0% { background-position: 0% 85% }
    50% { background-position: 100% 29% }
    100% { background-position: 0% 72% }
}
h1 {
  font-weight: normal;
  font-size: 50px;
  font-weight: normal;
  text-transform: uppercase;
  text-align: center; 
  color: red; 
}
h2 { 
text-align: center; 
color: #66a294; 
font-size: 38px; 
width: 100%;
 margin: 10px 10px; 
position: relative; 
line-height: 68px; 
font-weight: 600; 
}
h3 { 
text-align: center; 
color: #48a294; 
font-size: 28px; 
width: 100%;
 margin: 10px 10px; 
position: relative; 
line-height: 48px; 
font-weight: 500; 
}
h3:before { 
content: " "; 
position: absolute; 
left: 60%; 
bottom: 10; 
width: 100px; 
height: 4px;
font-weight: bold;
 background-color: #3079df; 
margin-left: -50px;
 }
h2:before { 
content: " "; 
position: absolute; 
left: 60%; 
bottom: 1; 
width: 100px; 
height: 3px;
font-weight: bold;
 background-color: #3079df; 
margin-left: -60px;
 }
           .md
    {
     width: 40%;
     margin: 10px auto;
     font-family: Lucida Console", "Courier New", monospace;
     padding: 20px;
     height: 90vh;
    text-align: center;
    }
     .md h1
     {
      font-family: Lucida Console", "Courier New", monospace;
      font-size: 24px;
      color: #000;
     }
.md h2
     {
      font-family: Lucida Console", "Courier New", monospace;
      font-size: 24px;
      color: #000;
     }
     .dot {
  height: 25px;
  width: 25px;
  background-color: green;
  border-radius: 50%;
  display: inline-block;
}
     .step
      {
       background: red;
  border-radius: 0.8em;
  -moz-border-radius: 0.8em;
  -webkit-border-radius: 0.8em;
  color: #ffffff;
  display: inline-block;
  font-weight: bold;
  line-height: 1.6em;
  margin-right: 5px;
  text-align: center;
  width: 1.6em;
      }
    </style>
  </head>
 <body>
 <h3> Example </h3>
    <div class = "md">
    <h1> Round dots with numbers </h1>
  <span class = "dot"> 1 </span>
  <span class = "dot"> 2 </span>
  <span class = "dot"> 3 </span>
  <span class = "dot"> 4 </span>
  <h2> Circles with Number </h2>
  <span class = "step"> 1 </span>
  <span class = "step"> 2 </span>
  <span class = "step">3 </span>
  <span class = "step"> 4 </span>
    </div>
  </body>
</html>

说明

在上面的示例中，我们创建了一个使用 CSS 为数字添加圆圈的示例。

输出

以下是这个例子的输出。

How to add a Circle around a Number in CSS

示例 2

<! DOCTYPE html>
<html>
  <head>
    <title> How to add a Circle around a number in css </title>
	<meta charset = "UTF-8" />
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
  <meta http-equiv = "X-UA-Compatible" content = "ie=edge">
   <style>
      :root {
  --color: #103;
  --direction: center;
  --distance: 15;
}
html {
    font-size: 15px;
    font-family: sans-serif;
}
.number-circle-list {
  list-style: none;
  padding-left: 1rem;
  counter-reset: circle-counter;
}
.number-circle-list--list-item {
  counter-increment: circle-counter;
  margin-bottom: 0.25rem;
}
.number-circle-list--list-item:before {
  content: counter(circle-counter);
  background-color: #e1e1e1;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  display: inline-block;
  font-size: 0.75rem;
  line-height: 1.5rem;
  color: black;
  text-align: center;
  margin-right: 0.5rem;
  position: relative;
  top: -2px;
}
.number-circle-list--list-item:last-child {
  margin-bottom: 0;
}
.number-circle-list--list-item .number-circle-list--list-item {
  margin-left: 0.25rem;
}
.number-circle-list--primary-color .number-circle-list--list-item:before {
  background-color: #0d5cab;
  color: white;
}
.number-circle-list--secondary-color .number-circle-list--list-item:before {
  background-color: #72c267;
  color: white;
}

.number-circle-list--tertiary-color .number-circle-list--list-item:before {
  background-color: #168dde;
  color: white;
}
body { 
  text-align: center;
  padding: 40px;
background: linear-gradient(124deg, #ff9200, #e81e1d, #e8b71d, #e9e81d, #1d9840, #1d9dde8, #2b1de8, #dd00f3, #dd00f3);
background-size: 1900% 1800%;
font-family: "Lucida Console", "Courier New", monospace;
-webkit-animation: rainbow 18s ease infinite;
-z-animation: rainbow 17s ease infinite;
-o-animation: rainbow 17s ease infinite;
  animation: rainbow 17s ease infinite; }
@-webkit-keyframes rainbow {
    0% { background-position: 0% 85% }
    50% { background-position: 100% 29% }
    100% { background-position: 0% 72% }
}
@-moz-keyframes rainbow {
    0% { background-position: 0% 85% }
    50% { background-position: 100% 29% }
    100% { background-position: 0% 72% }
}
@-o-keyframes rainbow {
    0% { background-position: 0% 85% }
    50% { background-position: 100% 29% }
    100% { background-position: 0% 72% }
}
@keyframes rainbow { 
    0% { background-position: 0% 85% }
    50% { background-position: 100% 29% }
    100% { background-position: 0% 72% }
}

h1 {
  font-weight: normal;
  font-size: 50px;
  font-weight: normal;
  text-transform: uppercase;
  text-align: center; 
  color: red; 
}
h2 { 
text-align: center; 
color: #66a294; 
font-size: 38px; 
width: 100%;
 margin: 10px 10px; 
position: relative; 
line-height: 68px; 
font-weight: 600; 
}
h3 { 
text-align: center; 
color: #48a294; 
font-size: 28px; 
width: 100%;
 margin: 10px 10px; 
position: relative; 
line-height: 48px; 
font-weight: 500; 
}
h3:before { 
content: " "; 
position: absolute; 
left: 60%; 
bottom: 10; 
width: 100px; 
height: 4px;
font-weight: bold;
 background-color: #3079df; 
margin-left: -50px;
 }
h2:before { 
content: " "; 
position: absolute; 
left: 60%; 
bottom: 1; 
width: 100px; 
height: 3px;
font-weight: bold;
 background-color: #3079df; 
margin-left: -60px;
 }
     .md
    {
     width: 40%;
     margin: 0px auto;
     font-family: Verdana, Geneva, sans-serif;
     padding: 10px;
     height: 100vh;
    text-align: center;
    }
     .md h1
     {
      font-family: Verdana, Geneva, sans-serif;
      font-size: 24px;
      color: #000;
     }
.md h2
     {
      font-family: Verdana, Geneva, sans-serif;
      font-size: 24px;
      color: #000;
     }
     .dot {
  height: 25px;
  width: 25px;
  background-color: green;
  border-radius: 50%;
  display: inline-block;
}
     .step
      {
       background: red;
  border-radius: 0.8em;
  -moz-border-radius: 0.8em;
  -webkit-border-radius: 0.8em;
  color: #ffffff;
  display: inline-block;
  font-weight: bold;
  line-height: 1.6em;
  margin-right: 5px;
  text-align: center;
  width: 1.6em;
      }
    </style>
  </head>

 <body>
 <h3> Example </h3>
    <div class = "band band--white">
    <div class = "inner band--inner">
        <div class = "row">
            <div class = "col">
                <h3> List of Classes </h3>
                <ul class = "number-circle-list">
                    <li class = "number-circle-list--list-item"> BA </li>
                    <li class = "number-circle-list--list-item"> BSC </li>
					<li class = "number-circle-list--list-item"> BSC IT </li>
                    <li class = "number-circle-list--list-item"> BCA </li>
					<li class = "number-circle-list--list-item"> BCOM </li>
                    <li class = "number-circle-list--list-item"> MSC </li>
                    <li class = "number-circle-list--list-item"> MCA </li>
					<li class = "number-circle-list--list-item"> MSC IT </li>
					<li class = "number-circle-list--list-item"> MSC </li>
					<li class = "number-circle-list--list-item"> MCOM </li>
                </ul>
            </div>            
        </div>
    </div>
</div>
  </body>
</html>

说明

在上面的示例中，我们创建了一个使用 CSS 为无序列表编号添加圆圈的示例。首先，我们创建一个无序列表，然后应用 CSS 属性。

输出

以下是这个例子的输出。

下一个话题Css-sliders

← 上一个下一个 →

如何在 CSS 中为数字添加圆圈？

示例 1

示例 2

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

CSS 教程

CSS 属性

CSS Advance

CSS Design

CSS Questions

杂项

CSS 多选题

面试题

如何在 CSS 中为数字添加圆圈？

示例 1

示例 2

相关帖子

CSS 中的背景图片叠加渐变

CSS Custom Font

Add Font in CSS

如何使用下载的字体在 CSS 中

CSS Wrap

CSS Pull Right

CSS 的特性

CSS Position Relative to Parent

CSS Table Alternate Row Color

CSS Override Class

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器