在 CSS 中使用 text-emphasis 來增強文本的趣味性
在CSS中設置文本樣式的方法有很多。您可以更改顏色、大小、字體,甚至添加陰影和輪廓等效果。但最近,我了解到一個我以前沒有聽說過的時尚 CSS 屬性,它非常棒!
它被稱為文本強調(text-emphasis),是 text-emphasis-* 屬性組合的簡稱,可以為文本添加強調標記。這些標記可用于以各種方式突出顯示文本,例如在文本上方或下方添加點、圓、雙圓或文本。
下面是一個示例,說明如何使用 text-emphasis 點添加到文本中:
.text-emphasis-dot {
text-emphasis: dot;
}
這將在文本頂部添加一個點,如下所示。
圖片
還可以使用如下 text-emphasis 屬性向文本添加雙圓:
.text-emphasis-double-circle {
text-emphasis: double-circle;
}
這是它的樣子。
圖片
您也可以使用字母來強調文本。例如,您可以使用 $ 在文本下方添加美元符號,如下所示:
.text-emphasis-dollar {
text-emphasis: '$' lime;
text-emphasis-position: under;
}
該 text-emphasis-position 屬性用于指定強調標記的位置。可以使用 over 、 under 、 right 或 left 來定位強調標記。
這是它的樣子。
圖片
哎呀!您甚至可以使用表情符號來強調文本。例如,您可以使用 ?? 在文本中添加火表情符號,如下所示:
.text-emphasis-fire {
text-emphasis: '??';
}
這是它的樣子。
圖片
我認為該 text-emphasis 屬性是一種有趣的方式,可以增加對文本的強調,并可用于為您的設計增添趣味。大多數現代瀏覽器都支持它,因此您可以立即開始使用它來使您的文本脫穎而出!
原文:https://www.amitmerchant.com/spicing-up-text-with-text-emphasis-in-css