5

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.

4

3 に答える 3

1

私はこれをブラウザで試しましたが、それでも要素のfont-sizeプロパティに関連しています。font-sizeが定義されていない場合は、font-sizeを持つ次の親から継承するか、ブラウザのデフォルト（通常は16px、TIL）を継承します。

于 2012-06-19T02:15:44.890 に答える
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;
}

画像：

ここに画像の説明を入力

于 2012-06-19T01:02:43.423 に答える
0

あなたの質問を誤解しているかもしれませんが、このように機能すると思います。フォント サイズが 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 を使用してボックスの角をテキストに合わせてスケーリングすることです。

于 2012-06-19T02:41:27.130 に答える