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