CSS3 text-emphasis 属性

CSS3 text-emphasis 属性

CSS3 text-emphasis 属性可以使文本具有视觉强调。通过设置该属性，可以为文本增加重心符号、点、斜线，以及实心圆、空心圆等标记，增强文本内容的可读性和视觉效果。本文将详细介绍 text-emphasis 属性的使用方法和一些实例。

text-emphasis-style

text-emphasis-style 属性用于设置文本的强调样式，包括点、重心符号、实心圆、空心圆、小角标、双重边框等。常用的属性值可分为以下几类：

  1. 常规样式，如填充圆圈、空心圆圈、点、双重下划线和波浪线等，对应的值包括：
  • none：默认值，不使用强调样式。
  • circle：实心圆圈。
  • dot：小圆点。
  • double-circle：双重实心圆圈。
  • filled：填充圆圈。
  • open：空心圆圈。
  • sesame：芝麻点。
  • triangle：小三角。
  • underline：下划线。
  • wavy：波浪线。
  • double：双重边框。
  1. 外置边框样式，如在文本区域外置实心圆边框、空心圆边框和三角边框等，对应的值包括：
  • circle：文本区域外置实心圆边框。
  • dot：文本区域外置点样式。
  • open：文本区域外置空心圆边框。
  • sesame：文本区域外置芝麻点样式。
  • triangle：文本区域外置三角边框。
  1. 内置强调样式，如重心符号、折线、双边缘等，对应的值包括：
  • accent：重心符号。
  • circle：重心圆点。
  • dot：重心小圆点。
  • sesame：芝麻重心点。
  • symbol：指定自定义显示符号。
  • triangle：重心三角形。
  • under dot：文本下方显示一个小圆点。
  • under circle：文本下方显示一个空心圆圈。
  • under sesame：文本下方显示一个芝麻点。

以下是 text-emphasis-style 的样式示例代码：

p.circle { text-emphasis-style: circle; }
p.dot { text-emphasis-style: dot; }
p.open { text-emphasis-style: open; }
p.sesame { text-emphasis-style: sesame; }
p.triangle { text-emphasis-style: triangle; }
p.underline { text-emphasis-style: underline; }
p.wavy { text-emphasis-style: wavy; }
p.double { text-emphasis-style: double; }

text-emphasis-color

text-emphasis-color 属性用于设置文本的强调样式颜色，它的默认值是 currentColor。常用的属性值包括 RGB 颜色值、RGBA 颜色值、十六进制颜色值和颜色名等。它的示例代码如下：

p.red { text-emphasis-color: red; }
p.blue { text-emphasis-color: blue; }
p.green { text-emphasis-color: green; }

text-emphasis-position

text-emphasis-position 属性用于设置文本的强调样式位置，可以使用关键字 over、under 和 right。over 表示在文本上方，under 表示在文本下方，right 表示在文本右侧。它的示例代码如下：

p.over { text-emphasis-position: over; }
p.under { text-emphasis-position: under; }
p.right { text-emphasis-position: right; }

实例

下面的样例展示了 text-emphasis 属性的使用方法，以及各个属性值对应的效果。

<p>这个文本使用波浪线样式：<span style="text-emphasis-style: wavy;">铠</span> </p>
<p>这个文本使用双重边框样式：<span style="text-emphasis-style: double;">猾</span> </p>
<p>这个文本使用点样式：<span style="text-emphasis-style: dot;">剿</span> </p>
<p>这个文本使用圆圈样式：<span style="text-emphasis-style: circle;">鲲</span> </p>
<p>这个文本使用三角形样式：<span style="text-emphasis-style: triangle;">繁</span> </p>
<p>这个文本使用重心符号样式：<span style="text-emphasis-style: accent;">锅</span> </p>
<p>这个文本使用外置实心圆圈边框样式：<span style="text-emphasis-style: circle; text-emphasis-position: outside; ">咚</span> </p>
<p>这个文本使用外置空心圆圈边框样式：<span style="text-emphasis-style: open; text-emphasis-position: outside; ">叁</span> </p>
<p>这个文本使用重心点样式：<span style="text-emphasis-style: dot; text-emphasis-position: under; ">旧</span> </p>
<p>这个文本使用外置小三角边框样式：<span style="text-emphasis-style: triangle; text-emphasis-position: outside; ">涯</span> </p>
<p>这个文本使用下方小空心圆圈样式：<span style="text-emphasis-style: under circle;">樊</span> </p>
<p>这个文本使用自定义符号样式：<span style="text-emphasis-style: symbol; text-emphasis-color: red; ">哈</span> </p>

以上是有关 CSS3 text-emphasis 的属性介绍和使用方法。使用该属性能够使得文本具有视觉上的强调效果，提高文本的可读性和吸引力。当然，使用这些样式时也应注意不要过度使用，以免影响文本的整体效果。

CSS3 target-position 属性 CSS3 text-justify 属性