CSS 属性

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

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

  • text-emphasis-color:设置文本周围强调标记的颜色（颜色名称、rgb 值、十六进制代码、rgba 等）。

  • text-emphasis-style:设置文本周围强调标记的样式或外观（none, open, dot, circle, double-circle, sesame等）。

  • text-emphasis-position:设置文本周围强调标记的位置。

文本强调颜色

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

属性值

  • 颜色名称:颜色的名称。示例 = red、blue等。

  • RGB:RGB 值。示例 = rgb(255,200,120)

  • RGBA:RGBA 值。示例 = rgba(255,200,120,0.4)。

  • HEX 代码:十六进制代码。示例 = #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:绘制的标记以垂直书写模式位于文本左侧。

根据语言优先选择强调标记的位置。与中文一样，首选位置在右下方，而在日语中，首选位置在右上方。

适用范围

所有 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;">文本强调位置.</p>
      <p style="text-emphasis-style: double-circle; text-emphasis-color: black; text-emphasis-position: under right">文本强调位置.</p>
      <p style="text-emphasis-style: filled circle; text-emphasis-color: rgb(235,120,90); text-emphasis-position: left under">文本强调位置.</p>
      <p style="text-emphasis-style: triangle; text-emphasis-color: rgba(2, 47, 24, 0.8); text-emphasis-position: left over">文本强调位置.</p>
</body>
</html>