在CSS中，文字是我们每天都要打交道的一大类。有了文字，一些文字修饰是必要的。这篇文章会讲两个比较新的文本修饰概念，text-decoration和text-emphasis。最后还会讲解一些有趣的用背景模拟下划线文字的动态效果。text-decorationText-decorationtext-decoration意思是文本装饰，它存在于很早的规范CSSLevel2(Revision1)--text-decoration[1]中。比如我们非常熟悉的下划线text-decoration:underline。p{text-decoration:underline;}image和比较新的CSS文字装饰模块Level3——text-decoration[2]，text-decoration已经比较丰富和更新了，进化了：text-decoration-linetext-decoration-colortext-decoration-style和尚未标准的text-decoration-thickness属性。今天，text-decoration是上述4个属性的缩写。其中：text-decoration-line：控制用来设置元素中文本的装饰类型，是在下方、上方还是贯穿文本,还支持Doublesolidline,dottedline,dashedline和很有意思的wavywavylinetext-decoration-color:这个很好理解,控制颜色text-decoration-thickness:控制装饰线的粗细这里是一个很好的图，帮助大家快速看懂：imageCodePenDemo--Text-decorationDemo[3]text-decoration-line可以同时设置。有趣的一点是text-decoration-line可以同时设置。p{text-decoration-line:overlineunderlineline-through;}image我们可以得到上中下线。text-decorationcanbetransitionedandanimatedtext-decoration的每个值都可以转换和动画。合理使用，在一些强调文字的地方，是非常有用的。
ThisisText-emphasis.
pspan{text-emphasis:circle;}text-emphasis:circle的作用是把上面的文字包裹起来，添加圆形图形，即圆形图形，效果如下：image当然默认是黑色的，我们可以在圆形后面添加颜色：pspan{text-emphasis:circle#f00;}image除了圆形，它还提供了很多图形您可以选择或自定义传入的字符，甚至是表情符号表达式：ABCD
Loremipsumdolorsitametconsecteturadipisicingelit.Mollitianostrumplaceatconsequaturdeseruntvelitducimuspossimuscommoditemporibusdebitisquam,molestiaelaboriosamsitrepellendussedsapientequidemquodaccusantiumvero.
p{??width:600px;font-size:24px;color:#666;}a{background:linear-gradient(90deg,#0cc,#0cc);background-size:100%3px;background-repeat:no-repeat;background-position:100%100%;color:#0cc;}用背景模拟文字下划线效果，效果图如下：或者，用背景模拟虚线下划线：a{background:linear-gradient(90deg,#0cc50%,transparent50%,transparent1px);background-size:10px2px;background-repeat:repeat-x;background-position:100%100%;}CodePenDemo--使用背景模拟下划线和虚线下划线效果。巧妙改变background-size和background-position实现文字悬停效果这里，通过巧妙改变background-size和background-position属性，我们可以实现一些非常有趣的文字悬停效果。先看这样一个demo，核心代码作用于被标签包裹的标签： Loremipsumdolorsitametconsecteturadipisicingelit.Mollitianostrumpplaceatconsequaturdeseruntvelitducimuspossimuscommoditemporibusdebitisquam,molestiaelaborosamsitrepellenduslinedapientequidemquodaccus{pgradient(30c41,#fffc0,#0ebeff);background-size:03px;background-repeat:no-repeat;background-position:0100%;transition:1sall;color:#0cc;}a:hover{background-size:100%3px;color:#000;}虽然我们设置了background:linear-gradient(90deg,#ff3c41,#fc0,#0ebeff)，但是它默认的background-size:03px开头，也就是开头看不到下划线.悬停时，更改background-size:100%3px。这时候会出现从03px到100%3px的变换，这是一种从头开始拉伸的效果。看最后的效果：由于设置的background-position为0100%，如果设置的background-position为100%100%，我们可以得到一个相反的效果：//其他不变，只改变background-position，变了从0100%到100%100%a{...background-position:100%100%;...}然后看效果，可以对比上面的动画看看具体的区别在哪里：CodePenDemo--背景下划线动画[8]OK，如果我们用背景来实现两条重叠的下划线，再利用上面两个不同的background-position值，我们可以得到一个更有趣的下划线悬停效果。CSS代码显示，背景模拟的两条下划线的background-position的值不同：a{background:linear-gradient(90deg,#0cc,#0cc),linear-gradient(90deg,#ff3c41,#fc0,#8500d8);背景大小:100%3px,03px;背景重复:无重复;背景位置:100%100%,0100%;过渡:0.5sall;颜色:#0cc;}a:hover{background-size:03px,100%3px;color:#000;}可以得到这样的效果，其实每次悬停的时候，都有两条下划线移动：CodePenDemo--backgroundunderlineanimation[9]FinallyOK到此为止，本文到此结束。它介绍了文本装饰的一些有趣的属性和动态效果。希望对你有所帮助：）更多精彩的CSS技术文章汇总在我的Github——iCSS[10]，会持续更新，欢迎点个星订阅收藏。有什么问题或者建议可以多交流。原创文章文笔有限，知识匮乏。如果文章中有任何不准确的地方，请告诉我。参考资料[1]CSSLevel2(Revision1)--text-decoration:https://www.w3.org/TR/CSS2/text.html#lining-striking-props[2]CSSTextDecorationModuleLevel3-文本装饰：https://drafts.c??sswg.org/css-text-decor-3/#text-decoration-property[3]CodePen演示——文本装饰演示：https://codepen.io/Chokcoco/pen/VwmEpqj[4]CodePenDemo--文字下划线过渡动画效果：https://codepen.io/Chokcoco/pen/jOymJZR[5]CodePenDemo--text-decorationDemo：https://codepen.io/Chokcoco/pen/poNQBye[6]CSSTextDecorationModuleLevel3:https://drafts.c??sswg.org/css-text-decor-3/#text-emphasis-property[7]CodePenDemo--使用背景模拟下划线虚线下划线：https://codepen.io/Chokcoco/pen/YzNQKwm[8]CodePenDemo——背景下划线动画：https://codepen.io/Chokcoco/pen/QWdgLwp[9]CodePenDemo——背景下划线动画：https://codepen.io/Chokcoco/pen/MWJogjQ[10]Github--iCSS：https://github.com/chokcoco/iCSS