css - CSS em 测量如何用于高度或边框半径测量？

Question

我知道“em”度量是字体大小的相对单位，如果它是在像 px 这样的绝对单位中指定的，则相对于包含元素的字体大小，或者相对于浏览器中的默认字体大小。

但我试图了解如何使用 em 作为盒子元素（如 div）的边框半径的测量值。我假设它与如何使用 em 作为盒子宽度或高度的测量值有关。

它仍然与字体大小有关吗？具体是如何测量的？我能够找到的关于如何计算边界半径的解释似乎都是基于 px 单位。

Answer 1

它似乎与字体大小有关。最后它仍然是一个度量单位，比如 px。

这个例子可能会让你更好地了解它是如何工作的。

标记：

<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

我在浏览器中尝试了这个，它仍然与 element 的 font-size 属性相关。如果未定义字体大小，它会从具有字体大小的下一个父级或浏览器默认值（通常为 16px；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 上，它为文本提供了 80 像素的默认大小（夸张），看起来好像盒子有几乎平的角。解决方案是使用 em 使框的角与文本一起缩放。