还在用em strong吗（快来试试 text-emphasis）前端css3

大家好，我是半夏，一个刚刚开始写文的沙雕程序员.如果喜欢我的文章，可以关注? 点赞加我微信：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;

文章图片

自定义的字符 \

 -webkit-text-emphasis: '好' red;

文章图片

家族成员-text-emphasis-position 可选值包括：
[ over | under ] && [ right | left ]
over
以水平书写模式在文本上绘制标记。
under
在水平书写模式下在文本下绘制标记。
right
在垂直书写模式下在文本右侧绘制标记。
left
在垂直书写模式下在文本左侧绘制标记。
所以说在特定情况下特定的属性才会生效
下面这举两个例子来证明这句话：
例子1 这两个式样都设置了right，但是可以看出最后的效果，只有under和over生效