CSS text-emphasis-style 属性

CSS text-emphasis-style 语法

在 CSS 中，text-emphasis-style 是 text-emphasis 的子属性，用于定义文本 “强调标记的外观” 。

语法：

text-emphasis-style: 关键字;

说明：

text-emphasis-style 属性的取值有 5 种，如下表所示。

text-emphasis-style 属性取值
取值	说明
none（默认值）	没有强调标记
dot	小圆圈（•）
circle	大圆圈（）
double-circle	双圆圈（◎）
triangle	三角形（▲）
sesame	芝麻型 (﹅)
filled	标记是实心的
open	标记是空心的
字符串	是一个字符串，自定义形状

text-emphasis-style 属性主要用于东亚文本（中文、日文、韩文等）的文本布局，在其他书写系统中可能没有明显的视觉效果。

需要注意的是，如果只指定了形状而未指定 filled 或 open，则默认为 filled（实心）。例如 text-emphasis-style: circle; 等同于 text-emphasis-style: filled circle;。”

text-emphasis “家族”

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

text-emphasis
text-emphasis-color
text-emphasis-style
text-emphasis-position

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

CSS text-emphasis-style 摘要

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

CSS text-emphasis-style 示例

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

示例 1：text-emphasis-style 基本用法

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        p { font-size: 30px; text-emphasis-color: red; }
        p:nth-of-type(1) { text-emphasis-style: none;}
        p:nth-of-type(2) { text-emphasis-style: dot;}
        p:nth-of-type(3) { text-emphasis-style: circle;}
        p:nth-of-type(4) { text-emphasis-style: double-circle;}
        p:nth-of-type(5) { text-emphasis-style: triangle;}
        p:nth-of-type(6) { text-emphasis-style: sesame;}
        p:nth-of-type(7) { text-emphasis-style: "#";}
    </style>
</head>
<body>
    <p>绿叶网（none）</p>
    <p>绿叶网（dot）</p>
    <p>绿叶网（circle）</p>
    <p>绿叶网（double-circle）</p>
    <p>绿叶网（triangle）</p>
    <p>绿叶网（sesame）</p>
    <p>绿叶网（自定义）</p>
</body>
</html>

页面效果如下图所示。

text-emphasis-style 基本用法

示例 2：text-emphasis-style 使用 filled 和 open

运行代码

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

页面效果如下图所示。

text-emphasis-style使用filled和open