关于前端:还在用em-strong吗快来试试-textemphasis

44次阅读

共计 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. 必须同时呈现程度和垂直两个方位的值哟!有些浏览器(这里不点名了)只写一个的确是能够的,然而不符合规范哟!

正文完
 0