CSS文本划线效果（text-decoration相关属性详解）

CSS文本划线效果（text-decoration相关属性详解）

引用

CSDN

1.

https://blog.csdn.net/qq_52395343/article/details/140374707

/* 样式类型*/
text-decoration: underline;
/* 下划线颜色 */
text-decoration-color: #ffcb15;
/* 超出基线的字符不会被截断 */
text-decoration-skip-ink: none;
/*下划线厚度 */
text-decoration-thickness: 5px;
/* 与其原始位置的偏移距离 */
text-underline-offset: 0;

1. text-underline-offset

使用 text-decoration 时，设置文本装饰下划线与其原始位置的偏移距离。

具体用法：

/* auto: 浏览器为下划线选择适当的偏移量*/
text-underline-offset: auto;
/* length:指定下划线偏移量 */
text-underline-offset: 0.1em;
text-underline-offset: 3px;
/* 百分比*/
text-underline-offset: 20%;
/* 全局值 */
text-underline-offset: inherit;
text-underline-offset: initial;
text-underline-offset: revert;
text-underline-offset: revert-layer;
text-underline-offset: unset;

注意：该属性不是 text-decoration 的简写属性！

2. text-decoration

设置文本上的装饰性线条的样式。该属性是 text-decoration-color、text-decoration-line、text-decoration-style、text-decoration-thickness 的简写属性。

• text-decoration-line：设置文本修饰线的类型，underline（在文本的下方）、overline（在文本的上方）、line-through（贯穿文本中间）
• text-decoration-style： 设定的线的样式，solid（直线）、double（双下划线）、dotted（点画线）、dashed（虚线）、wavy（波浪线）
• text-decoration-color：设置文本修饰线的颜色
• text-decoration-thickness：设置文本修饰线的厚度

text-decoration: underline wavy red;
text-underline-offset: 3px;

3. text-decoration-skip-ink

设置如何绘制超出基线的字符。默认值为 auto 下，超出基线的字符浏览器会进行截断；设置为 none，会直接穿过字体的超出部分，不会被截断：

text-decoration: underline red;
text-decoration-skip-ink: none;