CSS text-emphasis 属性

CSS text-emphasis 语法

在 CSS 中,text-emphasis 属性用于对文本实现强调效果。它主要用于东亚文字(如中文、日文、韩文),在字符旁边添加小标记来强调文本。

text-emphasis 是一个复合属性,它是以下 2 个属性的简写。

语法:

text-emphasis: style color;

说明:

style 代表的是 text-emphasis-style 的取值,它是必选的。而 color 代表的是 text-emphasis-color 的取值,它是可选的。如果省略 color,则表示使用默认颜色(即currentcolor)。

text-emphasis “家族”

text-emphasis “家族” 其实有 4 个属性,分别如下。

需要注意的是,text-emphasis 只是 text-emphasis-color 和 text-emphasis-style 这 2 个属性的简写,并不包括 text-emphasis-position。

CSS text-emphasis 摘要

属于 CSS 文本属性
使用频率
是否继承
默认值 使用子属性的默认值
兼容性 查看
官方文档 查看
MDN 查看

CSS text-emphasis 示例

接下来,我们通过一个简单的例子来讲解一下 CSS text-emphasis 属性是如何使用的。

示例:text-emphasis 基本用法

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        p:nth-of-type(1) { text-emphasis: circle;}
        p:nth-of-type(2) { text-emphasis: triangle red;}
        p:nth-of-type(3) { text-emphasis: "#";}
    </style>
</head>
<body>
    <p>绿叶网</p>
    <p>绿叶网</p>
    <p>绿叶网</p>
</body>
</html>

页面效果如下图所示。

text-emphasis 示例

给站长反馈

绿叶网正在不断完善中,小伙伴们如果发现任何问题,还望多多给站长反馈,谢谢!

邮箱:lvyenet@vip.qq.com

「绿叶网」服务号
绿叶网服务号放大
关注服务号,微信也能看教程。
绿叶网服务号