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;