共计 1931 个字符，预计需要花费 5 分钟才能阅读完成。
大家好，我是半夏👴，一个刚刚开始写文的沙雕程序员. 如果喜爱我的文章，能够关注➕ 点赞 👍 加我微信：frontendpicker，一起学习交换前端，成为更优良的工程师～关注公众号：搞前端的半夏, 理解更多前端常识! 点我摸索新世界！
原文链接 ==>https://sylblog.xin/archives/18
前言
最近在公司听一个小姐姐做工作安顿汇报的时候，发现这样一个成果，
登时感觉虎躯一震。在我的威逼利诱之下，小姐姐被迫说出这种文字效果是如何制作的，这不禁的让我浮想联翩 ……
上面就引出 CSS 的冷门标签:text-emphasis
兼容性
肉眼可见，兼容性不是太好，所以应用要谨慎
作用
emphasis：强调
顾名思义：用非凡的符号来对文本进行标记强调的。
语法
text-emphasis: text-emphasis-style，text-emphasis-color；
由此能够看出：text-emphasis 是 text-emphasis-style 和 text-emphasis-color 的缩写。
text-emphasis-color
示意标记内容的色彩, 能够抉择命名色彩（red）, RGB, RGBA, HEX, HSL 和 HSLA 作为值。
text-emphasis-style
示意用来润饰的内容
次要包含三类：
1. 没有任何润饰
none
-webkit-text-emphasis: none red;
2. 内置的修饰符
这里的 filled 和 open 是用来润饰前面的，当然也能够独自应用 open/filled
filed
-webkit-text-emphasis: filled red;
open
-webkit-text-emphasis: open red;
dot 点
-webkit-text-emphasis: dot red; -webkit-text-emphasis: open dot red;
-webkit-text-emphasis: filled dot red;
circle 实心圆圈
-webkit-text-emphasis: circle red;
-webkit-text-emphasis: open circle red;
-webkit-text-emphasis: filled circle red;
double-circle 实心圆圈，每个圆圈四周都有一个额定的轮廓
-webkit-text-emphasis: double-circle red;
`-webkit-text-emphasis: open double-circle red;
}`
-webkit-text-emphasis: filled double-circle red;
triangle 三角形，形如向上的箭头
`-webkit-text-emphasis: triangle red;
`
-webkit-text-emphasis: open triangle red;
-webkit-text-emphasis: filled triangle red;
sesame 斜线，形如反斜杠 (\)
-webkit-text-emphasis: sesame red;
-webkit-text-emphasis: open sesame red;
-webkit-text-emphasis: filled sesame red;
自定义的字符
\<string\>
-webkit-text-emphasis: '好' red;
家族成员 -text-emphasis-position
可选值包含：
[over | under] && [right | left]
over
以程度书写模式在文本上绘制标记。
under
在程度书写模式下在文本下绘制标记。
right
在垂直书写模式下在文本右侧绘制标记。
left
在垂直书写模式下在文本左侧绘制标记。
所以说在特定状况下特定的属性才会失效
上面这举两个例子来证实这句话：
例子 1
这两个式样都设置了 right，然而能够看出最初的成果，只有 under 和 over 失效
-webkit-text-emphasis-position: over right;
-webkit-text-emphasis-position: under right;
例子 2
首先咱们应用 writing-mode:vertical-rl; 让文字竖直显示，能够看出 失效的只有 right 和 left 属性
.textEmphasis1{
-webkit-text-emphasis-position:under right;
-webkit-text-emphasis-position: under left;
}最初：
1. 地位的书写程序不影响的哟！
2. 必须同时呈现程度和垂直两个方位的值哟！有些浏览器（这里不点名了）只写一个的确是能够的，然而不符合规范哟！