时间戳

首页 > 解决方案 > 具有“边界半径：100%；” 当字体大小改变时作为一个理想的圆圈

html - 具有“边界半径：100%；” 当字体大小改变时作为一个理想的圆圈

问题描述

这是带有圆圈的 JSFiddle（使用border-radius: 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;
}

标签： htmlcss

解决方案

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

  1. SVG方式：通过svg画圆，但需要在圆里面放一个数字。然后您可以使用 svg::before 或 ::after 和 z-index。 SVG 圆圈

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

  3. 使用 UTF-8 几何形状“○” 指令

我想，第二种选择将是您的最佳选择。

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

推荐阅读