CSS中的em度量单位如何用于高度或边框半径的测量？

Question

我理解“em”度量是相对于包含元素的字体大小而言的相对单位，如果使用像px这样的绝对单位，则是相对于包含元素的字体大小，或者相对于浏览器中默认的字体大小。

但我正在尝试了解如何将em用作盒子元素（例如div）的边框半径的度量。 我假设它与将em用作盒子的宽度或高度的度量方式有关。

它仍然与字体大小有关吗？ 具体来说，如何测量？ 我能找到的有关计算border-radius的解释似乎都基于px单位。

- Elisabeth

---

它的工作方式类似于font-size。div { font-size: 20px; border-radius: 2em; }相当于border-radius: 40px。 - thirtydot

Answer 1

似乎与字体大小有关，毕竟它仍然是一种测量单位，例如像素（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;
}

图片：

- Zhihao

Answer 2

我在浏览器中尝试过这个，它仍然相对于元素的字体大小属性。如果字体大小未定义，则会从具有字体大小的下一个父级继承，或者采用浏览器默认值（通常为16px；TIL）。

- ckundo

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 让盒子的角随着文本缩放。

- sinθ

---

谢谢大家！我一直在寻找它是如何计算的。听起来 em 是基于字体大小转换为 px，因此在这方面类似于 font-size（并使用相同的继承规则等）。因此，它与元素的宽度或高度无关，而是与元素将具有的字体大小相关（如果指定了一个或从父级继承了一个）。 - Elisabeth