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

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 设置元素的线条修饰类型，常见属性如下：

         

②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-Notes

你真的了解text-decoration吗？-QUI-Notes

你真的了解text-decoration吗？-QUI-Notes

知识延展

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

text-underline-offset: 10px;

你真的了解text-decoration吗？-QUI-Notes

另外还有个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，感谢这些定义者，让前端开发更简单！我是陈小知，不做无用分享。