文本中的点：宽度/高度（em 和边框半径）

Posted 2023-03-28

【中文标题】文本中的点：宽度/高度（em 和边框半径）

【英文标题】：A dot in a text: width/height in em and border-radius

【发布时间】：2022-01-17 20:18:23

【问题描述】：

我想做一件非常简单的事情。 文本中的一个点。我想在em中指定点的大小。

height: 0.35em;
width: 0.35em;
border-radius: 50%;

我的问题是圆点看起来不圆。

如果我以 px 为单位定义大小，它会起作用。

height: 6px;
width: 6px;
border-radius: 50%;

我认为问题在于尺寸小。这有什么诀窍吗？

请看这里： http://jsfiddle.net/4rtpfu18/

编辑： 我通过使用 svg 解决了这个问题，它似乎在不同的字体大小下都能正常工作。用 svg 来做这么简单的事情感觉像是绕道而行。

height: 0.375em;
width: 0.375em;
display: inline-block;
bottom: 0.11em;
position: relative;
margin-left: 0.1em;
margin-right: 0.1em;
background-image:url('data:image/svg+xml;charset=utf-8,%3Csvg viewBox=%220 0 10 10%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Ccircle cx=%225%22 cy=%225%22 r=%225%22 /%3E%3C/svg%3E');

【问题讨论】：

icon-sets.iconify.design/mdi/circle

【参考方案1】：

如果您在em 中使用等效编号px，则它可以正常工作。

我在this link找到它。

p
  font-size: 100%;



.circle    
    height: 0.375em;
    width: 0.375em;
    background-color: black;
    border-radius: 50%;
    display: inline-block;
    bottom: 0.23em;
    position: relative;
    margin-left: 0.1em;
    margin-right: 0.1em;
    
    
    .circle-px    
    height: 6px;
    width: 6px;
    background-color: black;
    border-radius: 50%;
    display: inline-block;
    bottom: 0.23em;
    position: relative;
    margin-left: 0.1em;
    margin-right: 0.1em;
    

<p>
Lorem Ipsum <span class="circle"></span> Lorem Ipsum
</p>
<p>
Lorem Ipsum <span class="circle-px"></span> Lorem Ipsum
</p>

【讨论】：

非常感谢！我想在不同的字体大小中使用点。在某些尺码中，它看起来很棒，但并非所有尺码都适合。

不客气！ px中你想要的每一个尺寸，都可以转换成em。