在 CSS 中使用 text-emphasis 来增强文本的趣味性

在CSS中设置文本样式的方法有很多。您可以更改颜色、大小、字体,甚至添加阴影和轮廓等效果。但最近,我了解到一个我以前没有听说过的时尚 CSS 属性,它非常棒!

它被称为文本强调(text-emphasis),是 text-emphasis-* 属性组合的简称,可以为文本添加强调标记。这些标记可用于以各种方式突出显示文本,例如在文本上方或下方添加点、圆、双圆或文本。

下面是一个示例,说明如何使用 text-emphasis 点添加到文本中:

.text-emphasis-dot {
    text-emphasis: dot;
}

这将在文本顶部添加一个点,如下所示。

还可以使用如下 text-emphasis 属性向文本添加双圆:

.text-emphasis-double-circle {
    text-emphasis: double-circle;
}

这是它的样子。

您也可以使用字母来强调文本。例如,您可以使用 $ 在文本下方添加美元符号,如下所示:

.text-emphasis-dollar {
    text-emphasis: '$' lime;
    text-emphasis-position: under;
}

text-emphasis-position 属性用于指定强调标记的位置。可以使用 overunderrightleft 来定位强调标记。

这是它的样子。

哎呀!您甚至可以使用表情符号来强调文本。例如,您可以使用 🔥 在文本中添加火表情符号,如下所示:

.text-emphasis-fire {
    text-emphasis: '🔥';
}

这是它的样子。

我认为该 text-emphasis 属性是一种有趣的方式,可以增加对文本的强调,并可用于为您的设计增添趣味。大多数现代浏览器都支持它,因此您可以立即开始使用它来使您的文本脱颖而出!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/627509.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

python数据可视化:层次聚类热图clustermap()

【小白从小学Python、C、Java】 【考研初试复试毕业设计】 【Python基础AI数据分析】 python数据可视化: 层次聚类热图 clustermap() [太阳]选择题 请问关于以下代码表述错误的选项是? import seaborn as sns import matplotlib.pyplot as plt import n…

低成本窗帘电机解决方案KP81101 3.6A有刷直流电机H桥驱动器代替DRV8871

KP81101是一款有刷直流电机驱动器,适用于家用电器、工业设备和其他有刷直流电机、步进电机应用场合。驱动器由四个 NMOS 构成的 H 桥组成,两个逻辑输入控制全桥驱动器,以驱动直流有刷电机电流双向流动。驱动器的最大峰值电流能力为 3.6A。芯片…

Warning logs 2024-05-15

mysql数据库中文模糊查询时出现异常 Error querying database. Cause: java.sql.SQLException: Illegal mix of collations for operation like Select("select f.* from fundDetails f" " where (case when #{keyword} is not null then f.operateTime like c…

软件项目验收第三方测试报告如何获取

软件项目验收第三方测试报告是确保软件质量、安全性和稳定性的重要环节。对于企业和开发者来说,获取一份全面、专业的第三方测试报告,对于提升软件产品的竞争力和用户满意度至关重要。本文将介绍如何获取软件项目验收第三方测试报告,以及相关…

13.监控redis

1.状态信息 redis-cli keys * info select 0-15#16个库&#xff0c;依次查看即可2.导入模板 在zabbix-server界面-模板-导入-选择文件-redis.xml <?xml version"1.0" encoding"UTF-8"?> <zabbix_export><version>2.0</version&g…

全栈中VUE的install报错说taobao仓库不好使的解决办法

长话短说&#xff0c;就是报错了&#xff0c;直接上干货。 step1&#xff1a;查看设置&#xff0c;主要是看registry npm config getstep2&#xff1a;设置仓库 npm config set registry https://registry.npmmirror.comstep3&#xff1a;再运行步骤一的指令查看仓库是不是变…

Java 循环结构 - for, while 及 do...while

Java 循环结构 - for, while 及 do…while 顺序结构的程序语句只能被执行一次。 如果您想要同样的操作执行多次&#xff0c;就需要使用循环结构。 Java中有三种主要的循环结构&#xff1a; while 循环 do…while 循环 for 循环 在 Java5 中引入了一种主要用于数组的增强型 f…

刷代码随想录有感(66):回溯算法——组合问题的优化(剪枝)

代码&#xff1a;将for循环中i的搜索范围进行缩小&#xff0c;免去多余的不可能符合条件的操作。 for(int i start; i < n-(k-tmp.size())1;i) 实质是剪枝&#xff0c;拿n4,k4作比较&#xff1a; 显然结果只可能是[1,2,3,4]&#xff0c;选取顺序只可能是1-2-3-4&#xff…

Kafka 核心属性速览

目录 1. 背景 2. Kafka的核心属性 2.1. Broker 2.2. Partitions 2.3. Replicas 3. 实践 4. 参考 1. 背景 Kafka是一个流行队列组件&#xff08;在AWS上叫MSK&#xff09;&#xff0c;其他的队列还有rocketMQ、rabbitMQ。就我个人而言&#xff0c;我只是一个使用…

图文详解JUC:Wait与Sleep的区别与细节

目录 一.Wait() 二.Sleep() 三.总结Wait()与Sleep()的区别 一.Wait() 在Java中&#xff0c;wait() 方法是 Object类中的一个方法&#xff0c;用于线程间的协作。当一个线程调用wait() 方法时&#xff0c;它会释放对象的锁并进入等待状态&#xff0c;直到其他线程调用相同对…

Ps 滤镜:素描

Ps菜单&#xff1a;滤镜/滤镜库/素描 Filter/Filter Gallery/Sketch “素描”滤镜组中的滤镜可以将纹理添加到图像上&#xff0c;还适用于创建美术或手绘外观。许多“素描”滤镜在重绘图像时使用前景色和背景色。 半调图案 Halftone Pattern “半调图案”滤镜通过创建一种特定图…

【微信小程序开发(从零到一)【婚礼邀请函】制作】——任务分析和效果实现的前期准备(1)

&#x1f468;‍&#x1f4bb;个人主页&#xff1a;开发者-曼亿点 &#x1f468;‍&#x1f4bb; hallo 欢迎 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! &#x1f468;‍&#x1f4bb; 本文由 曼亿点 原创 &#x1f468;‍&#x1f4bb; 收录于专栏&#xff1a…

【069】基于SpringBoot+Vue实现的企业资产管理系统

系统介绍 基于SpringBootVue实现的企业资产管理系统管理员功能有个人中心&#xff0c;用户管理&#xff0c;资产分类管理&#xff0c;资产信息管理&#xff0c;资产借出管理&#xff0c;资产归还管理&#xff0c;资产维修管理。用户可以对资产进行借出和归还操作。因而具有一定…

详解lighthouse通过命令行方式运行并生成html测试报告的方法

lighthouse可以通过命令行的方式运行并生成html报告&#xff0c;我们可以通过lighthouse --help 命令查看命令行的详细用法&#xff0c;在这里我仅列出最常用的命令行使用方法&#xff01; 常用lighthouse命令行参数详解 * --chrome-flags&#xff1a;传递自定义标志给Chrome…

动态el-form表单以及动态禁用

当右侧下拉框选中为 长期有效,那么左侧输入框为禁用状态; <el-form-item label"证明有效期" class"is-required"><div v-for"(item,index) in form.arrayDat" :key"index" style"width: 100%;display: flex;justify-co…

记录一期Typecho WebShell木马渗透的经历

我创建了一个Typecho的轻量博客,之前一直是本地运行,最近才上了公网,平时自己也是粗心大意,把密码也写在第一篇博文里面 有一天,我突发奇想的想要提交更新,本博客是通过git进行代码版本管理的避免自己修改官方源码出现了问题,无法还原,也定时备份SQL, 然后莫名其妙的发现多了…

html--地图

<!DOCTYPE html> <html lang"en"> <head><meta charset"utf-8"><title>ECharts</title><!--Step:1 引入一个模块加载器&#xff0c;如esl.js或者require.js--><script src"js/esl.js"></scr…

【Doris的安装与部署】

1 集群规划和环境准备 Doris作为一款MPP架构的OLAP数据库&#xff0c;可以在绝大多数主流的商用服务器上运行。 1.1 环境要求 一般推荐使用Linux系统&#xff0c;版本要求是CentOS 7.1及以上或者Ubuntu 16.04及以上&#xff0c;这也是目前服务器市场最主流的操作系统。 操作…

3月份太阳镜行业线上市场销售数据分析

在消费者行为方面&#xff0c;太阳镜不仅仅是视力保护工具&#xff0c;更逐渐成为一种时尚单品。随着人们对健康和美容重视程度的提高&#xff0c;太阳镜作为体现个人风格的单品&#xff0c;其市场需求得到了进一步的推动。此外&#xff0c;全球旅行和旅游业的恢复&#xff0c;…

小程序|手写签名功能如何开启?

老师们可以利用易查分的手写签名功能&#xff0c;在发布查询后&#xff0c;让学生或家长签字确认知晓。下面教大家如何使用吧。 &#x1f4cc;使用教程 &#x1f50e;在哪里开启手写签名&#xff1f; 按照正常流程创建查询后&#xff0c;在查询管理页找到需要开启签名功能的查…