还在用em strong吗?快来试试 text-emphasis
大家好,我是半夏,一个刚刚开始写文的沙雕程序员.如果喜欢我的文章,可以关注 点赞 加我微信: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;
}
最后:
2. 必须同时出现水平和垂直两个方位的值哟!有些浏览器(这里不点名了)只写一个确实是可以的,但是不符合规范哟!
还在用em strong吗?快来试试 text-emphasis的更多相关文章
- 你给文字描述,AI艺术作画,精美无比!附源码,快来试试!
作者:韩信子@ShowMeAI 深度学习实战系列:https://www.showmeai.tech/tutorials/42 TensorFlow 实战系列:https://www.showmeai ...
- em,strong,b,i的区别
文章来源: http://www.zhihu.com/question/19551271 默认样式: strong=b=粗体 em=i=斜体 HTML4.01: strong,em代表语义,从语义 ...
- HTML 5 <em> <strong> <dfn> <code> <samp> <kbd> <var> <cite> 标签
<em> 呈现为被强调的文本. <strong> 定义重要的文本. <dfn> 定义一个定义项目. <code> 定义计算机代码文本. <samp ...
- 从客户端(Content="<EM ><STRONG ><U >这是测试这...")中检测到有潜在危险的Request.Form 值。
说明: 请求验证过程检测到有潜在危险的客户端输入值,对请求的处理已经中止.该值可能指示存在危及应用程序安全的尝试,如跨站点脚本攻击.若要允许页面重写应用程序请求验证设置,请将 httpRuntime ...
- 那些代表性的HTTP状态码,你还只知道404吗?快来看看吧【转】
前言 在网络上发送请求后,经常会根据请求的状态码去判断请求的成功失败与否,常见的状态码有200,404,500. 不过你以为HTTP请求的状态码就只有这么几个么?其实是远远比这个多的. 今天这篇文章我 ...
- 你还不了解SpringSecurity吗?快来看看SpringSecurity实战总结~
SpringSecurity简介: 权限管理中的相关概念 主体 principal: 使用系统的用户或设备或从其他系统远程登录的用户等等,简单说就是谁使用系统谁就是主体. 认证 authentic ...
- 还看不懂同事代码?快来补一波 Java 7 语法特性
前言 Java 平台自出现到目前为止,已经 20 多个年头了,这 20 多年间 Java 也一直作为最流行的程序设计语言之一,不断面临着其他新兴编程语言的挑战与冲击.Java 语言是一种静态强类型语言 ...
- 你还在手撕微服务?快试试 go-zero 的微服务自动生成
0. 为什么说做好微服务很难? 要想做好微服务,我们需要理解和掌握的知识点非常多,从几个维度上来说: 基本功能层面 并发控制&限流,避免服务被突发流量击垮 服务注册与服务发现,确保能够动态侦测 ...
- 还不会使用linux?快来通过VMware安装centos系统吧~
1.前言 Linux,全称GNU/Linux,是一种免费使用和自由传播的类UNIX操作系统,其内核由林纳斯·本纳第克特·托瓦兹于1991年10月5日首次发布,它主要受到Minix和Unix思想的启发, ...
随机推荐
- python 实现批量md转word
# qianxiao996精心制作 #博客地址:https://blog.csdn.net/qq_36374896 #md批量转word import os def auto_md_to_docx(f ...
- ITerm让MAC终端更加灵活高效
一.ITerm2简介 1.安装 iTerm2 是一款完全免费的,专为 Mac OS 用户打造的命令行应用.直接在官网上http://iterm2.com/ 下载并安装即可. 2.配置 设置ITerm为 ...
- nacos底层原理
Nacos 为什么选择NacosNacos 致力于帮助您发现.配置和管理微服务.Nacos 提供了一组简单易用的特性集,帮助您快速实现动态服务发现.服务配置.服务元数据及流量管理. Nacos 帮 ...
- pyinstaller打包Django项目
系统:ubuntu18.04 / Centos 7自带Python3.61.安装pip3 apt-get install -y python3-pip pip3 install --u ...
- mq 的缺点 ?
系统可用性降低 系统引入的外部依赖越多,越容易挂掉,本来你就是 A 系统调用 BCD 三个系统的 接口就好了,人 ABCD 四个系统好好的,没啥问题,你偏加个 MQ 进来,万一 MQ 挂了咋整?MQ ...
- notify()和 notifyAll()有什么区别?
当一个线程进入 wait 之后,就必须等其他线程 notify/notifyall,使用 notifyall,可 以唤醒所有处于 wait 状态的线程,使其重新进入锁的争夺队列中,而 notify 只 ...
- 是否可以从一个静态(static)方法内部发出对非静态 (non-static)方法的调用?
不可以,静态方法只能访问静态成员,因为非静态方法的调用要先创建对象,在 调用静态方法时可能对象并没有被初始化.
- 学习Redis(二)
1.Redis应用场景 1.缓存(键过期时间) 1) 缓存session会话 2) 缓存用户信息,找不到再去mysql查,查到然后回写到redis 3) 商城优惠卷过期时间 2.排行榜(列表& ...
- ctfhub rce 命令注入 过滤cat 过滤空格 过滤目录分隔符
命令注入 源码直接给了出来尝试127.0.0.1;ls 发现一串数字的php文件cat查看 127.0.0.1|cat 233382768628619.php 查看源码发现flag 过滤cat 这题和 ...
- x64 简介
本篇原文为 introduction to x64 assembly ,如果有良好的英文基础,可以点击该链接进行下载阅读.本文为我个人:寂静的羽夏(wingsummer) 中文翻译,非机翻,著作权 ...