CSS em测量如何用于测量高度或边界半径？

Question

据我所知，“em”测量是font-size的相对单位，相对于包含元素的字体大小，如果它以px等绝对单位指定，或者是浏览器中的默认字体大小

但是我试图理解如何使用em作为box元素的border-radius的测量，就像div一样。我假设它与如何使用em作为盒子宽度或高度的测量值有关。

它仍然与font-size有关吗？具体来说，它是如何衡量的？关于如何计算边界半径的解释似乎都是基于px单位。

Answer 1

好像它与font-size有关。最后，它仍然是一个度量单位，如px。

此 example 可能会让您更好地了解其工作原理。

<强>标记：

<div id="A"></div>
<div id="B"></div>
<div id="text-height"></div>
<p>Some text</p>

<div id="C"></div>
<div id="D"></div>

<强> CSS：

p {
    line-height: 1em;
    background: grey;
    display: inline-block;
    position: relative;
    top: -4px;
}
#A {
    height: 4em;
    background: red;
    width: 1em;
    display: inline-block;
}
#B {
    height: 2em;
    background: blue;
    width: 1em;
    display: inline-block;
}
#text-height {
    height: 1em;
    background: green;
    width: 1em;
    display: inline-block;
}
#C, #D {
    height: 4em;
    width: 4em;
    display: inline-block;
}
#C {
    border-radius: 2em;
    background: red;
}
#D {
    border-radius: 1em;
    background: blue;
}

图片：

Answer 2

我在浏览器和it is still relative to the font-size property of the element中尝试过此操作。如果未定义font-size，则它继承自具有font-size的下一个父级，或者浏览器默认值（which is 16px usually; TIL）。

Answer 3

我可能会误解你的问题，但我认为它的作用是这样的。如果字体大小为12px并且您创建一个边框半径为1em的框，则它的边框半径为12px（如果是13px，则为13px）。如果您需要框的边框半径与文本保持相同的比例（无论文本大小如何），这将非常有用。对于瞬间，如果你有一个包含文字的方框，那就说：

<style>
  // lets say the browser gives the text a default size of 16px on a pc
  .box {border-radius:5px}// lets say the box's size scales with the text
</style>

看起来盒子几乎完全是圆角。但是让我们说在iPhone上，它给文本默认大小为80px（夸张），看起来好像盒子有几乎平坦的角落。解决方案是让盒子的角落与使用em的文本缩放。