html - 当字体大小发生变化时，将 "border-radius: 100%;"作为理想圆圈

Question

Here是带有一个圆圈的 JSFiddle(由 border-radius: 100%; 制成)以红色突出显示。

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

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

这是代码:

<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;
}

Answer 1

据我所知，您有以下三种选择:

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

2. 通过 CSS 绘制一个正方形并设置 border-radius: 50%;。更高的值将不起作用。这是一个例子:[试试我][2]

3. 使用 UTF-8 几何形状 "○ " instructions

我想，在您的情况下，第二个选项是最佳选择。

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