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>

列印頁面