添加 CSS
- 将边界半径设置为“50%”。
- 指定元素的宽度和高度。
- 使用背景、边框和颜色属性设置类的样式。
- 使用 text-align 属性的“center”值将数字居中。
- 指定数字的字体。
.circle {
border-radius: 50%;
width: 34px;
height: 34px;
padding: 10px;
background: #fff;
border: 3px solid #000;
color: #000;
text-align: center;
font: 32px Arial, sans-serif;
}
现在我们可以看到完整的例子。
在数字周围添加圆圈的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
.circle {
border-radius: 50%;
width: 34px;
height: 34px;
padding: 10px;
background: #fff;
border: 3px solid #000;
color: #000;
text-align: center;
font: 32px Arial, sans-serif;
}
</style>
</head>
<body>
<div class="circle">1</div>
</body>
</html>
接下来，我们将展示一个示例，其中我们在 1 到 4 位数字周围使用圆圈。
此示例可用于任意数量的文本和任意大小的圆圈。
其中我们将使用 line-height 属性。
请注意，width 和 line-height 属性必须具有相同的值。
在具有一到四位数字的数字周围添加圆圈的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
.circle {
width: 120px;
line-height: 120px;
border-radius: 50%;
text-align: center;
font-size: 32px;
border: 3px solid #000;
}
</style>
</head>
<body>
<div class="circle">1</div>
<div class="circle">100</div>
<div class="circle">10000</div>
<div class="circle">1000000</div>
</body>
</html>
在我们的最后一个示例中，我们使用 -mozand -webkitprefixes 和 border-radius 属性。
其中我们还使用设置为“inline-block”的 display 属性将元素表示为内联级块容器。
使用 line-height 属性在数字周围添加圆圈的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
span.circle {
background: #e3e3e3;
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
color: #6e6e6e;
display: inline-block;
font-weight: bold;
line-height: 40px;
margin-right: 5px;
text-align: center;
width: 40px;
}
</style>
</head>
<body>
<span class="circle">1</span>
</body>
</html>
使用 CSS 可以轻松地在数字周围添加一个圆圈。
这可以使用 border-radius 属性来完成。
在此代码中，我们还可以找到一种在具有一到四位数字的数字周围添加圆圈的方法。
现在，我们将逐步展示该过程。
创建 HTML
- 在 <body> 中创建一个类名为“circle”的 <div>。
- 在 <div> 中放置一个数字。
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
</head>
<body>
<div class="circle">1</div>
</body>
</html>
日期：2020-06-02 22:14:54 来源：oir作者：oir