Html 拥有；边界半径：100%&引用；当字体大小改变时作为理想的圆圈

带圆圈的JSFIDLE（边框半径为100%；）以红色突出显示。

字体大小与视口宽度相适应。当视口足够宽时，圆看起来很理想，但随着视口宽度的减小，圆垂直变平。

有没有办法始终保持圆的理想状态？

以下是代码：

<div class="meaning">
<ol class="circle">
<li>Text_1</li>
</ol>
</div>

.meanings_and_examples {
display: flex;
flex-direction: column;
}

.meaning {
width: auto;
text-align: left;
color: #1f2c60;
font-size: calc(0.5em + 2.3vw);
}

ol.circle {
position: relative;
list-style-type: none;
padding-left: 3em;
margin-left: 1vw;
border: 2px solid purple;
}

li {
line-height: calc(1em + 1.5vw);
}

ol.circle > li {
position: relative;
counter-increment: item;
margin-top: 1.5%;
border: 2px solid orange;
}

ol.circle > li::before {
position: absolute;
transform: translateX(-150%);
content: counter(item);
display: inline-block;
text-align: center;
border-radius: 100%;
width: calc(1.1em + 1.5vw);
background: #1f2c60;
color: white;
border: 2px solid red;
}

正文1
.意义和示例{
显示器：flex；
弯曲方向：立柱；
}
.意义{
宽度：自动；
文本对齐：左对齐；
颜色：#1f2c60；
字体大小：calc（0.5em+2.3vw）；
}
圈{
位置：相对位置；
列表样式类型：无；
左：3em；
左边距：1vw；
边框：2件纯色紫色；
}
李{
线高：计算（1em+1.5vw）；
}
ol.circle>li{
位置：相对位置；
反增量：项目；
利润率最高：1.5%；
边框：2倍纯色橙色；
}
ol.circle>li:：之前{
位置：绝对位置；
转化：translateX（-150%）；
内容：柜台（项目）；
显示：内联块；
文本对齐：居中；
边界半径：100%；
宽度：计算值（1.1米+1.5瓦）；
背景：#1f2c60；
颜色：白色；
边框：2倍纯红；
}

据我所知，您有三种选择：

SVG方式：通过SVG绘制圆圈，但需要在圆圈中输入数字。然后可以使用svg:：before或：：after和z-index。

通过CSS绘制正方形，并设置边框半径：50%；。更高的价值是行不通的。下面是一个例子：[试试我][2]

使用UTF-8几何形状“○”

我想，第二种选择对你来说是最好的选择

  [2]: https://codepen.io/juricon/pen/eYmRVPQ    

---

据我所知，你有三个选择：

SVG方式：通过SVG绘制圆圈，但需要在圆圈中输入数字。然后可以使用svg:：before或：：after和z-index。

通过CSS绘制正方形，并设置边框半径：50%；。更高的价值是行不通的。下面是一个例子：[试试我][2]

使用UTF-8几何形状“○”

我想，第二种选择对你来说是最好的选择

  [2]: https://codepen.io/juricon/pen/eYmRVPQ    

---

这是您对第二项任务的[解决方案][1]。不要忘记，你不能移动没有数字的红边圆，因为它是一个物体。您必须添加额外的标记并使用position:absolute for it+z-index

另外，你能画出并展示关于“我想要红色边框的物品垂直对齐而不是橙色边框的物品”的信息吗？我不明白。你想实现这个目标吗：

附言：实际上，你会在代码笔链接中找到你所有任务的解决方案。另外，我想，还有另一种方法可以通过flex box完成所有这些事情

"

（1）
几乎圆形：）文本\u 1

（2）
文本2

"

---

这是您对第二项任务的[解决方案][1]。不要忘记，你不能移动没有数字的红边圆，因为它是一个物体。您必须添加额外的标记并使用position:absolute for it+z-index

另外，你能画出并展示关于“我想要红色边框的物品垂直对齐而不是橙色边框的物品”的信息吗？我不明白。你想实现这个目标吗：

附言：实际上，你会在代码笔链接中找到你所有任务的解决方案。另外，我想，还有另一种方法可以通过flex box完成所有这些事情

"

（1）
几乎圆形：）文本\u 1

（2）
文本2

"

---

如果你想要一个圆，你必须从一个正方形开始。我看了小提琴，但似乎无法使“圆垂直变平。”-你能提供1）一个宽度/高度（px）作为参考，其中圆是“理想的”，2）一个宽度/高度（px）作为参考，其中圆不是“理想的”-此外，如果您发现这只发生在特定的视口中，您是否考虑过在硬代码中添加meda quieriessyles@WallyJSFIDLE以像素为单位显示视口宽度，因此您可以使用我最初文章中的链接来播放预览窗口大小。当宽度为1000px时，圆圈看起来很棒，但当它减小到200px时，圆圈变平。这在我的PC和Android设备上都会发生。两者都使用基于铬的Opera浏览器。你也能看到吗？如果你想要一个圆，你必须从一个正方形开始。我看了小提琴，但似乎无法使“圆垂直变平。”-你能提供1）一个宽度/高度（px）作为参考，其中圆是“理想的”，2）一个宽度/高度（px）作为参考，其中圆不是“理想的”-此外，如果您发现这只发生在特定的视口中，您是否考虑过在硬代码中添加meda quieriessyles@WallyJSFIDLE以像素为单位显示视口宽度，因此您可以使用我最初文章中的链接来播放预览窗口大小。当宽度为1000px时，圆圈看起来很棒，但当它减小到200px时，圆圈变平。这在我的PC和Android设备上都会发生。两者都使用基于铬的Opera浏览器。你也看到了吗？女贞，@Yuriy Ivanochko第二种方法非常有效，谢谢！但是，项目的垂直对齐有一个小问题——看一看：我希望红色边框的项目垂直对齐，而橙色边框的项目垂直对齐。蓝色圆圈内的数字垂直于圆的中间（水平-它已经是）。我将圆的边界半径减少到10%，以便更好地查看（取消）对齐。上述情况是否可能？提前谢谢你！女贞，@Yuriy Ivanochko第二种方法非常有效，谢谢！但是，项目的垂直对齐有一个小问题——看一看：我希望红色边框的项目垂直对齐，而橙色边框的项目垂直对齐。蓝色圆圈内的数字垂直于圆的中间（水平-它已经是）。我将圆的边界半径减少到10%，以便更好地查看（取消）对齐。上述情况是否可能？提前谢谢你！谢谢你，@Yuriy Ivanochko你能看一下这个代码吗？我在第一条评论中强调了一些修改。谢谢你，@Yuriy Ivanochko你能看一下吗