text-emphasis
text-emphasis CSS 屬性用於給文字（空格和控制字元除外）應用著重號。它是 text-emphasis-style 和 text-emphasis-color 的簡寫屬性。
試一試
text-emphasis: none;
text-emphasis: filled red;
text-emphasis: "x";
text-emphasis: filled double-circle #ffb703;
<section id="default-example">
<p>
I'd far rather be
<span class="transition-all" id="example-element">happy than right</span>
any day.
</p>
</section>
p {
font: 1.5em sans-serif;
}
text-emphasis 屬性與 text-decoration 有很大的不同。text-decoration 屬性不繼承，並且指定的裝飾應用於整個元素。然而，text-emphasis 是繼承的，這意味著可以更改後代元素的著重號。
著重號符號的大小（類似於 Ruby 符號）大約是字型大小的 50%，噹噹前行高不足以容納這些符號時，text-emphasis 可能會影響行高。
注意： text-emphasis 不會重置 text-emphasis-position 的值。這是因為如果著重號的樣式和顏色在文字中可能會有所不同，它們的定位極不可能發生變化。在極少數需要此功能的情況下，請使用屬性 text-emphasis-position。
構成屬性
此屬性是以下 CSS 屬性的簡寫：
語法
/* Initial value */
text-emphasis: none; /* No emphasis marks */
/* <string> value */
text-emphasis: "x";
text-emphasis: "點";
text-emphasis: "\25B2";
text-emphasis: "*" #555555;
text-emphasis: "foo"; /* Should NOT use. It may be computed to or rendered as 'f' only */
/* Keywords value */
text-emphasis: filled;
text-emphasis: open;
text-emphasis: filled sesame;
text-emphasis: open sesame;
/* Keywords value combined with a color */
text-emphasis: filled sesame #555555;
/* Global values */
text-emphasis: inherit;
text-emphasis: initial;
text-emphasis: revert;
text-emphasis: revert-layer;
text-emphasis: unset;
值
none-
無著重號。
filled-
形狀被實心顏色填充。如果
filled和open都不存在，則這是預設值。 open-
形狀是空心的。
dot-
顯示小圓圈作為標記。實心圓點是
'•'(U+2022)，空心圓點是'◦'(U+25E6)。 circle-
顯示大圓圈作為標記。實心圓圈是
'●'(U+25CF)，空心圓圈是'○'(U+25CB)。當未給出其他形狀時，這是水平書寫模式下的預設形狀。 double-circle-
顯示雙圓圈作為標記。實心雙圓圈是
'◉'(U+25C9)，空心雙圓圈是'◎'(U+25CE)。 triangle-
顯示三角形作為標記。實心三角形是
'▲'(U+25B2)，空心三角形是'△'(U+25B3)。 sesame-
顯示芝麻點作為標記。實心芝麻點是
'﹅'(U+FE45)，空心芝麻點是'﹆'(U+FE46)。當未給出其他形狀時，這是垂直書寫模式下的預設形狀。 <string>-
將給定字串顯示為標記。作者不應在
<string>中指定多個字元。使用者代理可能會截斷或忽略包含多個字素簇的字串。 <color>-
定義標記的顏色。如果未指定顏色，則預設為
currentColor。
正式定義
| 初始值 | 作為簡寫中的每個屬性
|
|---|---|
| 應用於 | 所有元素 |
| 繼承性 | 是 |
| 計算值 | 作為簡寫中的每個屬性
|
| 動畫型別 | 作為簡寫中的每個屬性 |
正式語法
text-emphasis =
<'text-emphasis-style'> ||
<'text-emphasis-color'>
<text-emphasis-style> =
none |
[ [ filled | open ] || [ dot | circle | double-circle | triangle | sesame ] ] |
<string>
<text-emphasis-color> =
<color>
示例
帶有強調形狀和顏色的標題
此示例繪製了一個標題，其中使用三角形來強調每個字元。
CSS
h2 {
text-emphasis: triangle #dd5555;
}
HTML
<h2>This is important!</h2>
結果
規範
| 規範 |
|---|
| CSS 文字裝飾模組級別 3 # text-emphasis-property |
瀏覽器相容性
載入中…
另見
- 長格式屬性
text-emphasis-style、text-emphasis-color。 text-emphasis-position屬性允許定義著重號的位置。