CSS - text-emphasis 属性

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

它是一个以下属性的简写属性

text-emphasis-color：设置文本周围强调标记的颜色（颜色名称、rgb 值、十六进制代码、rgba 等）。
text-emphasis-style：设置文本周围强调标记的样式或外观（none、open、dot、circle、double-circle、sesame 等）。
text-emphasis-position：设置文本周围强调标记的位置。

文本强调颜色

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

可能的值

颜色名称：颜色的名称。例如 = red、blue 等。
RGB：RGB 值。例如 = rgb(255,200,120)
RGBA：RGBA 值。例如 = rgba(255,200,120,0.4)。
十六进制代码：十六进制代码。例如 = #ff00ff。

应用于

所有 HTML 元素。

DOM 语法

object.style.textEmphasisColor = "#ff00ff";

CSS text-emphasis - 带颜色

<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

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：在垂直书写模式下在文本左侧绘制标记。

强调标记的位置根据语言而定。例如，在中文中，首选位置是 under right，而在日语中是 over right。

应用于

所有 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>

打印页面