math-depth

**math-depth** 属性描述了数学公式每个元素相对于该公式的顶级容器的深度概念。当应用 font-size: math 时，它用于缩放元素的 字体大小 的计算值。

注意：在 MathML Core 用户代理样式表 中，<math> 元素的默认值为 font-size: math，因此无需显式指定它。

语法

css
/* Keyword values */
math-depth: auto-add;

/* Relative values */
math-depth: add(2);
math-depth: add(-2);

/* Absolute value */
math-depth: 4;

/* Global values */
math-depth: inherit;
math-depth: initial;
math-depth: revert;
math-depth: revert-layer;
math-depth: unset;

值

auto-add

当继承的 math-style 为 compact 时，设置为继承的 math-depth 加 1。

add(<integer>)

设置为继承的 math-depth 加上指定的整数。

<integer>

设置为指定的整数。

正式定义

初始值0
应用于所有元素
继承是
计算值如指定
动画类型不可动画

正式语法

math-depth = 
  auto-add          |
  add( <integer> )  |
  <integer>

示例

指定数学深度

以下示例显示了更改 math-depth 属性对子公式字体大小的影响。每个子公式中的数字表示应用的 math-depth 和缩放因子。

第一个 <mtext> 元素用作其他子公式的参考，并且没有应用任何特定样式。第二个和第三个子公式的 math-depth 设置为 auto-add，并显示了根据 math-style 缩放的效果。

最后两个子公式显示了将 math-depth 设置为特定值的效果。

HTML

html
<p style="font-size: 3rem; margin: 1rem 0">
  <math>
    <mtext>0</mtext>

    <!-- auto-add value has no effect when math-style is normal -->
    <mrow style="math-style: normal">
      <mrow style="math-depth: auto-add">
        <mtext>0</mtext>
      </mrow>
    </mrow>

    <!-- the inherited math-style is compact, so math-depth is set to 1 -->
    <mrow style="math-depth: auto-add">
      <mtext>1</mtext>
    </mrow>

    <mrow style="math-depth: add(2)">
      <mtext>2</mtext>
      <mrow style="math-depth: add(-1)">
        <mtext>1</mtext>
      </mrow>
      <mrow style="math-depth: 0">
        <mtext>0</mtext>
      </mrow>
    </mrow>
  </math>
</p>

结果

规范

规范
MathML Core
# the-math-script-level-property

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参阅