How is CSS em measurement used for height or border-radius measured?

问题

I understand that the "em" measurement is a relative unit for font-size, relative to the font-size of the containing element if it's specified in an absolute unit like px, or to the default font-size in the browser.

But I'm trying to understand how using em as a measurement for the border-radius of a box element, like a div, works. I'm assuming it's related to how using em as a measurement for the width or height of a box works.

Is it still related to font-size? How, specifically, is it measured? The explanations for how border-radius is computed that I've been able to find all seem to be based on px units.

回答1:

I may be misunderstanding you question, but I think it works like this. If the font size is 12px and you make a box with a border radius of 1em, then it will have a border radius of 12px (13px if it's 13px). This is useful if you need the box's border radius to stay in the same ratio to the text regardless of the text's size. For instants, if you had a box with text in it, lets say:

<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>

It would look as though the box had almost completely round corners. But lets say on an iphone, it gives the text a default size of 80px (exaggeration) it would seem as though the box had virtually flat corners. The solution is to have the box's corners scale with the text using em.

回答2:

It seems like it's related to font-size. In the end it's still a unit of measurement, like px.

This example might give you a better idea on how it works.

Markup:

<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;
}

Image:

回答3:

I tried this in the browser and it is still relative to the font-size property of the element. If the font-size is not defined, it inherits from the next parent that has a font-size, or the browser defaults (which is 16px usually; TIL).

来源：https://stackoverflow.com/questions/11092927/how-is-css-em-measurement-used-for-height-or-border-radius-measured

标签

css