text-emphasis
The text-emphasis CSS property applies emphasis marks to text (except spaces and control characters). It is a shorthand for text-emphasis-style and text-emphasis-color.
试试看
The text-emphasis property is quite different from text-decoration. The text-decoration property does not inherit, and the decoration specified is applied across the whole element. However, text-emphasis does inherit, which means it is possible to change emphasis marks for descendants.
The size of the emphasis symbol, like ruby symbols, is about 50% of the size of the font, and text-emphasis may affect line height when the current leading is not enough for the marks.
注意: text-emphasis 不会重置 text-emphasis-position 的值。这是因为如果强调标记的样式和颜色可能在文本中有所不同，那么它们的定位极不可能发生变化。在极少数需要这种情况时，请使用属性 text-emphasis-position.
组成属性
此属性是以下 CSS 属性的简写
语法
/* Initial value */
text-emphasis: none; /* No emphasis marks */
/* <string> value */
text-emphasis: "x";
text-emphasis: "点";
text-emphasis: "\25B2";
text-emphasis: "*" #555;
text-emphasis: "foo"; /* Should NOT use. It may be computed to or rendered as 'f' only */
/* Keywords value */
text-emphasis: filled;
text-emphasis: open;
text-emphasis: filled sesame;
text-emphasis: open sesame;
/* Keywords value combined with a color */
text-emphasis: filled sesame #555;
/* Global values */
text-emphasis: inherit;
text-emphasis: initial;
text-emphasis: revert;
text-emphasis: revert-layer;
text-emphasis: unset;
值
none-
无强调标记。
filled-
该形状用实色填充。如果既没有
filled也没有open，则此为默认值。 open-
该形状是空心的。
dot-
显示小圆圈作为标记。实心点是
'•'(U+2022)，空心点是'◦'(U+25E6)。 circle-
显示大圆圈作为标记。实心圆是
'●'(U+25CF)，空心圆是'○'(U+25CB)。这是水平书写模式中的默认形状，如果没有给出其他形状。 double-circle-
显示双圆圈作为标记。实心双圆圈是
'◉'(U+25C9)，空心双圆圈是'◎'(U+25CE)。 triangle-
显示三角形作为标记。实心三角形是
'▲'(U+25B2)，空心三角形是'△'(U+25B3)。 sesame-
显示芝麻作为标记。实心芝麻是
'﹅'(U+FE45)，空心芝麻是'﹆'(U+FE46)。这是垂直书写模式中的默认形状，如果没有给出其他形状。 <string>-
显示给定的字符串作为标记。作者不应在
<string>中指定多个字符。UA 可能会截断或忽略包含多个字形簇的字符串。 <color>-
定义标记的颜色。如果没有颜色，则默认为
currentcolor。
正式定义
| 初始值 | 与简写属性的每个属性相同
|
|---|---|
| 适用范围 | 所有元素 |
| 继承 | 是 |
| 计算值 | 与简写属性的每个属性相同
|
| 动画类型 | 与简写属性的每个属性相同 |
正式语法
示例
带有强调形状和颜色的标题
本示例绘制了一个标题，使用三角形来强调每个字符。
CSS
h2 {
text-emphasis: triangle #d55;
}
HTML
<h2>This is important!</h2>
结果
规范
| 规范 |
|---|
| CSS 文本装饰模块级别 3 # text-emphasis-property |
浏览器兼容性
BCD 表格仅在启用了 JavaScript 的浏览器中加载。
另请参阅
- 详细属性
text-emphasis-style，text-emphasis-color。 - 属性
text-emphasis-position用于定义强调标记的位置。