试试用 text-emphasis来装饰你的文字吧

已于 2022-04-21 20:52:35 修改
阅读量1.3w 收藏 14
点赞数 10
文章标签： css
于 2021-08-12 17:53:28 首次发布
原创文章，禁止任何形式转载！
本文链接：https://blog.csdn.net/shangyanaf/article/details/119650311
版权
学透CSS 专栏收录该内容
56 篇文章 13 订阅 ¥99.90 ¥99.00
订阅专栏

大家好，我是半夏👴，一个刚刚开始写文的沙雕程序员.如果喜欢我的文章，可以关注➕ 点赞 👍 加我微信：frontendpicker，一起学习交流前端，成为更优秀的工程师～关注公众号：搞前端的半夏,了解更多前端知识! 点我探索新世界！

原文链接 ==>https://sylblog.xin/archives/18

前言

最近在公司听一个小姐姐做工作安排汇报的时候，发现这样一个效果，


顿时感觉虎躯一震。在我的威逼利诱之下，小姐姐被迫说出这种文字效果是如何制作的，这不由的让我浮想联翩…

下面就引出 CSS 的冷门标签:text-emphasis

兼容性

肉眼可见，兼容性不是太好，所以使用要慎重

了解本专栏 订阅专栏 解锁全文
YOLO大王
关注
  • 10
    点赞
  • 踩
  • 14
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
专栏目录
订阅专栏
css3新增样式（文本效果--text-justify 文本对齐方式、text-emphasis 文本重点标记）
m0_71814235的博客
07-22 592
css3新增样式（文本效果--text-justify 文本对齐方式、text-emphasis 文本重点标记）
text-emphasis——css文本强调
QUX轻博客
07-03 892
还记得小时候写黑板报吗？总有一些小伙伴喜欢在重点字句上画着重符号，就像下面一样： 告诉你个小秘密，放心不是想约你去“六峰山”，就是想告诉你这样的...
css 文本强调字符装饰 text-emphasis
朝阳39的博客
10-29 857
强调装饰符 如文字下打点或放个三角形做标记等，都是强调装饰符。 强调装饰符的字号大小是主文字内容字号大小的一半 如果行高不是很高，则强调装饰符会自动增加当前这一行所占据的高度。 强调装饰符和正文之间的距离主要由字体决定。 兼容性 IE和Edge不支持 text-emphasis-color 设置强调字符的颜色，初始值就是当前文字的颜色。 text-emphasis-style 强调字符的样式，默认值为none，无装饰 属性值可以是任意字符 如果指定的是多个字符，则只会使用第一个字符作为.
CSS 文字装饰 text-decoration &amp； text-emphasis
nidongla的博客
04-07 1599
在 CSS 中，文字算是我们天天会打交道的一大类了，有了文字，则必不可少一些文字装饰。 本文将讲讲两个比较新的文字装饰的概念 text-decoration 与 text-emphasis，在最后，还会讲解使用 background 模拟文字下划线的一些有趣的动效。 text-decoration 文字装饰技术资讯 www.secn.net text-decoration 意为文字装饰，在很早的规范 CSS Level 2 (Revision 1) -- text-decoration 就已经存在了。譬如.
CSS3新增样式（文本效果）
weixin_52629158的博客
04-08 378
填充的芝麻是'﹅'（U+FE45），开放的芝麻是'﹆'（U+FE46）。text-emphasis 属性是简写属性，用于在一个声明中设置 text-emphasis-style 和 text-emphasis-color。实心圆是'●'（U+25CF），空心圆是'○'（U+25CB）。填充的双圆是'◉'（U+25C9），开放的双圆是'◎'（U+25CE）。实心三角形是'▲'（U+25B2），空心三角形是'△'（U+25B3）。填充点为'•'（U+2022），空心点为'◦'（U+25E6）。
使用CSS text-emphasis对文字进行强调装饰的实现代码
11-20
在过去，想要对某部分文字进行强调，通常的做法是加粗，或者使用一个高亮的颜色，现在有了新的选择，就是使用 text-emphasis 属性进行强调装饰。 text-emphasis 家族总共有4个CSS属性，分别是： text-emphasis ...
text-emphasis-test:CSS3 `text-emphasis` 的测试页
06-30
而在西方语言中，通常用下划线、星号或着重号来强调文本，`text-emphasis` 提供了一种标准化的实现方式。 ### 2. `text-emphasis-style` `text-emphasis-style` 子属性允许你定义文本的强调样式。它可以接受多个值...
De-Emphasis.rar
06-29
De-Emphasis 标题 Optical modulators for generating de-emphasis formatted optical signals and methods of operating the same Optical Modulators for Generating De-Emphasis Formatted Optical Signals and ...
pre-emphasis.rar_pre_pre-emphasis
07-14
pre-emphasis speech program
pre-emphasis 预加重 专利
06-29
Pre-emphasis apparatus, low voltage differential signaling transmitter including the same and pre-emphasis method Pre-emphasis apparatus, low voltage differential signaling transmitter including the ...
CSS3文本效果
weixin_45929716的博客
04-28 205
CSS3文本效果 CSS3 文本阴影 text-shadow 属性 text-shadow 属性应用于阴影文本 语法 text-shadow: h-shadow v-shadow blur color; text-shadow: 5px 5px 5px red; //阴影向下偏移5px,向右偏移5px，虚化5px,红色阴影 兼容性： IE10+、FireFox3.5+、Chrome4+、Safar...
【CSS 文本属性（Text）】
Hey_Coder
11-20 1905
CSS 文本属性（Text） 1. color 属性: 颜色的前景色 (文本/文本装饰/边框/当前颜色的 颜色) 2. direction 属性: 文本/表列/水平溢出的 方向 (文本方向 可用标签的 dir 属性 替代) 3. CSS3 hanging-punctuation 属性: 悬挂标点的 位置和符号 (实验中 属性) 4. letter-spacing 属性 : 字符间距 (字符之间的 额外空白/空间) 5. line-height 属性: 设置 行高/行间距 (一行多高,影响 行之间的
使用css做一个旋转的八卦图
weixin_40923558的博客
07-02 348
【代码】使用css做一个旋转的八卦图。
CSS 【详解】样式选择器（含ID、类、标签、通配、属性、伪类、伪元素、Content属性、子代、后代、兄弟、相邻兄弟、交集、并集等选择器）
最新发布
朝阳39的博客
07-06 695
idCSS 样式选择器，用于选中页面中的 html 元素，以便添加 CSS 样式。
Tailwind CSS是什么？
学以致用 知行合一
07-04 357
定义：Tailwind CSS是一个高度可定制的低级CSS实用程序类集合，用PostCSS编写，旨在通过JavaScript进行定制。它提供了一系列基础工具类，允许开发者通过组合这些工具类来快速构建页面和UI。起源：Tailwind CSS最初由Adam Wathan等人于2017年11月1日在GitHub上作为开源项目发布。随着时间的推移，它逐渐成长为一个成熟且流行的CSS框架。
使用css，让div消失在视野中的方法
博哥的二进制世界
07-03 297
使用visibility:hidden比display:none性能上要好，display:none切换显示时visibility，页面产生回流（当页面中的一部分元素需要改变规模尺寸、布局、显示隐藏等，页面重新构建，此时就是回流。给元素设置visibility: hidden也可以隐藏这个元素，但是隐藏元素仍需占用与未隐藏时一样的空间，也就是说虽然元素不可见了，但是仍然会影响页面布局。visibility:hidden是视觉上消失了，在文档流中占位，浏览器会解析该元素；
[Vue3 + TS + Vite] CSS穿透
qq_45831414的博客
07-03 334
Template中</div>CSS中/*上 右 下 左*//*上 右 下 左*/</style>设置elementPlus抽屉组件的header样式。
WebKit与CSSOM视图模块：探索现代Web布局的协同进化
2401_85760095的博客
07-01 423
CSSOM视图模块为开发者提供了一组丰富的API，用于直接与页面的CSS属性进行交互，实现动态样式的修改和计算。WebKit对CSSOM视图模块的支持为开发者提供了强大的工具，以实现动态和响应式的Web设计。通过本文的学习，你现在应该能够理解CSSOM视图模块的基本概念和用法，并能够将它们应用到你的Web开发项目中。CSSOM视图模块定义了一组操作和访问CSS布局信息的API，这些API允许开发者以编程方式读取和修改元素的样式，以及计算元素的尺寸和位置。
DRAM pre-emphasis
09-23
为了解决这些问题，可以使用DRAM pre-emphasis技术。 DRAM pre-emphasis通过在发送端增加高频成分来改善信号质量。具体来说，在发送信号之前，DRAM控制器会增加信号的高频成分，这样在传输过程中由于信号衰减，接收...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

YOLO大王

你的打赏，我的动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值