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

    /* 样式类型*/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;