css中的text-decoration你真的了解会用嘛?今天想总结一下 下划线偏移位置的知识点text-underline-offset,没想到却钓到了“大鱼”,发现了被我们遗忘的text-decoration竟然是个宝库哇!刷新了我对text-decoration文本修饰的理解,再次填补了俺的知识盲区。原来text-decoration这么强大!!!
你真的了解text-decoration吗?-Qui-Note

text-decoration知识网

本来想写简介,算了,这个属性类似蜘蛛网,就叫它知识网吧!下面跟着我一起去详细了解一下

text-decoration  是text-decoration-line, text-decoration-color, text-decoration-style 以及 text-decoration-thickness 属性的缩写。

  • text-decoration-line 线条修饰类型,属性见子属性①,线条不限数量,可设多个
  • text-decoration-color 线条修饰颜色
  • text-decoration-style 线条修饰风格,属性见子属性②
  • text-decoration-thickness 线条修饰粗细

css公式

text-decoration: text-decoration-line | text-decoration-color | text-decoration-style | text-decoration-thickness

注意:后三个属性,必须在线条类型不为none的情况下才能生效,也就是说,必须存在文本线条修饰!

子属性

①text-decoration-line 设置元素的线条修饰类型,常见属性如下:

  • none 无文本修饰效果。
  • underline 下划线修饰
  • overline 上划线修饰
  • line-through 删除线修饰

         

②text-decoration-style 设置元素的线条修饰风格,常见属性如下:

  • solid 实线
  • double 双实线
  • dotted 点划线
  • dashed 虚线
  • wavy 波浪线

案例缩写:

text-decoration: red wavy underline; // 常见写法
text-decoration: red wavy underline 6px; // 加粗细
text-decoration: underline line-through overline red; //多种线条类型

你真的了解text-decoration吗?-Qui-Note

你真的了解text-decoration吗?-Qui-Note

你真的了解text-decoration吗?-Qui-Note

知识延展

最后再说一下开头提到的属性text-underline-offset,这属性是跟underline类型配对的,是下划线偏移量,就是离文字的远近!
用法:

text-underline-offset: 10px;

你真的了解text-decoration吗?-Qui-Note

另外还有个text-underline-position也是跟underline配对的,用来调整下划线的位置,有效值为:left/right/under/unset...

  • auto 用户代理 会根据自己的算法来确认下划线是放在字母基线上还是 放在字母基线下方
  • under 强制下划线的位置为字母基线的下方,在这个位置,下划线不会穿过任何字母,这样能确保数学方程式或者化学式的下标不会被下划线阻挡。
  • left 在垂直排版模式下,使下划线的位置在文字的左侧,在水平排版模式下,和 under 相同。
  • right 在垂直排版模式下,使下划线的位置在文字的右侧,在水平排版模式下,和 under 相同。
  • —— 摘自MDN《text-underline-position》
text-underline-position: under;

这样下来我们就把text-decoration的知识点梳理完了,是不是很强大,有点类似border这个属性了,突然觉得css的设计者们忒伟大了,专门来解决各种bug,感谢这些定义者,让前端开发更简单!我是陈小知,不做无用分享。