在CSS中，text-emphasis属性用于在文本的某些字符上添加强调装饰，如点、圆圈或其他形状。这种装饰通常用于东亚语言（如中文、日文和韩文），在这些语言中，字符间可能没有空格来区分单词，因此text-emphasis提供了一种视觉上区分文本重要部分的方法。

text-emphasis属性可以接受几个不同的值，包括形状（如点、圆圈）、颜色、样式（如填充或空心）以及强调标记的位置（例如，在字符的上方或下方）。

基本用法
selector {
  text-emphasis: '●' red;
  /* 或者使用预定义的形状 */
  /* text-emphasis: circle red; */
  /* 指定位置和样式（尽管目前浏览器支持有限） */
  /* text-emphasis-style: filled;
  text-emphasis-position: under; */
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.

但是，需要注意的是，CSS的text-emphasis属性的全面支持（特别是样式和位置的定制）在浏览器中并不普遍。许多浏览器主要支持使用预定义的形状（如circle、dot、double-circle、triangle等）和颜色。

示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
  .emphasized {
    font-size: 24px;
    text-emphasis: '●' red;
    /* 使用自定义字符和颜色 */
  }

  /* 如果浏览器支持预定义形状 */
  .emphasized-predefined {
    font-size: 24px;
    text-emphasis: circle blue;
  }
</style>
</head>
<body>

<p class="emphasized">这是一段需要强调的文本。</p>
<p class="emphasized-predefined">这是使用预定义形状的强调。</p>

</body>
</html>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
注意事项
  • 并非所有浏览器都支持text-emphasis的所有方面，尤其是样式和位置的详细定制。
  • 强调标记默认添加到文本中的每个字符上，但你可以通过CSS的::first-letter、::first-line等伪元素或JavaScript来更精细地控制哪些字符被强调。
  • 对于不支持text-emphasis的浏览器，你可能需要寻找替代方案，如使用<span>元素和背景图像或CSS渐变来模拟强调效果。
结论

虽然text-emphasis是一个有趣的CSS属性，但由于其有限的浏览器支持和功能限制，它可能不适用于所有情况。在决定使用它之前，请务必检查你的目标浏览器是否支持该属性，并考虑可能的替代方案。