CSS - text-emphasis 属性

在 CSS 中，text-emphasis 属性用于为文本添加强调，例如在文本周围添加一些颜色、字符串或图案。

它是以下属性的简写属性：

text-emphasis-color：设置文本周围强调标记的颜色（颜色名称、rgb 值、十六进制代码、rgba 等）。
text-emphasis-style：设置文本周围强调标记的样式或外观（无、开放、圆点、圆圈、双圈、芝麻等）。
text-emphasis-position：设置强调标记在文本周围的位置。

文本强调颜色

属性 text-emphasis-color 用于设置文本周围强调标记的颜色。如果未指定颜色，则将 currentcolor 值设置为默认值。

可能的值

颜色名称：颜色的名称。示例 = 红色、蓝色等。
RGB：RGB值。示例 = rgb（255,200,120）
RGBA：RGBA值。示例 = rgba（255,200,120,0.4）。
十六进制代码：十六进制代码。示例 = #ff00ff。

适用于

所有 HTML 元素。

DOM 语法


object.style.textEmphasisColor = "#ff00ff";

CSS 文本强调 - 带颜色


<html>
<head>
</head>
<body>
	 	<h2>Text Emphasis</h2>
	 	 	 <p style="text-emphasis-color: red; text-emphasis-style: '*';">Text Emphasis name.</p>
	 	 	 <p style="text-emphasis-color: #00ffff; text-emphasis-style: dot;">Text Emphasis HEX code.</p>
	 	 	 <p style="text-emphasis-color: rgb(235,120,90); text-emphasis-style: circle;">Text Emphasis RGB.</p>
	 	 	 <p style="text-emphasis-color: rgba(2, 47, 24, 0.8); text-emphasis-style: triangle;">Text Emphasis RGBA.</p>
</body>
</html>

CSS 文本强调样式

属性 text-emphasis-style 用于为文本周围的强调标记添加样式。

可能的值

none：不设置强调标记。
filled：用纯色填充元素。默认值。
open：将形状设置为空心。
dot：显示为小圆圈的标记，可以是打开的圆点，也可以是实心圆点。
circle：显示为大圆圈的标记，可以是开放的圆圈，也可以是实心圆圈。水平书写的默认形状。
double-circle：显示为双圆圈的标记，可以是打开的双圆圈，也可以是实心的双圈。
triangle：显示为三角形的标记，可以是开放三角形，也可以是实心三角形。
sesame：显示为芝麻（~）的标记，可以是打开的芝麻，也可以是填充的芝麻。竖向书写的默认形状。
<string>：显示为传递的字符串值的标记。
<color>：设置标记的颜色。

适用于

所有 HTML 元素。

DOM 语法


object.style.textEmphasisStyle = "circle";

CSS text-emphasis-style - 基本示例

让我们看一个例子：


<html>
<head>
</head>
<body>
	 	<h2>Text Emphasis</h2>
	 	 	 <p style="text-emphasis-style: 'm'; text-emphasis-color: blue;">Text Emphasis string.</p>
	 	 	 <p style="text-emphasis-style: double-circle; text-emphasis-color: black;">Text Emphasis double-circle.</p>
	 	 	 <p style="text-emphasis-style: filled circle; text-emphasis-color: rgb(235,120,90);">Text Emphasis filled circle.</p>
	 	 	 <p style="text-emphasis-style: triangle; text-emphasis-color: rgba(2, 47, 24, 0.8);">Text Emphasis triangle.</p>
</body>
</html>

CSS text-emphasis - 带位置

属性 text-emphasis-position 用于设置强调标记在文本周围的位置。

可能的值

over right
over left
under right
under left
left over
right under
left under

over：以水平书写模式在文本上绘制的标记。
under：在文本下方以水平书写模式绘制的标记。
right：以垂直书写模式绘制在文本右侧的标记。
left：以垂直书写模式绘制在文本左侧的标记。

根据语言，强调标记的位置是首选。就像在中文中一样，首选位置是在右下方，而在日语中，它是在右上方。

适用于

所有 HTML 元素。

DOM 语法


object.style.textEmphasisPosition = "over right";

让我们看一个例子：


<html>
<head>
</head>
<body>
	 	<h2>Text Emphasis Position</h2>
	 	 	 <p style="text-emphasis-style: 'm'; text-emphasis-color: blue; text-emphasis-position: over left;">Text Emphasis position.</p>
	 	 	 <p style="text-emphasis-style: double-circle; text-emphasis-color: black; text-emphasis-position: under right">Text Emphasis position.</p>
	 	 	 <p style="text-emphasis-style: filled circle; text-emphasis-color: rgb(235,120,90); text-emphasis-position: left under">Text Emphasis position.</p>
	 	 	 <p style="text-emphasis-style: triangle; text-emphasis-color: rgba(2, 47, 24, 0.8); text-emphasis-position: left over">Text Emphasis position.</p>
</body>
</html>

打印本页