熟悉的CSS2用法text-decoration在CSS3中有了很多新特性。本文将介绍Level4最新添加的特性。CSSTextDecoration文字装饰线：text-decoration-linetext-decoration-line是CSS3之前的text-decoration，属性有如下属性值：属性值effectnonenoeffectunderlineunderlineoverlineline-throughstrikethroughblink文字闪烁spelling-error显示为浏览器拼写错误grammar-error显示为浏览器语法错误特别提醒：装饰线的粗细：text-decorate-width这个属性是主要针对underline,overline,line-through这三种装饰线样式，设置这些装饰线的粗细，除了可以直接用数值表达外，还可以设置如下属性：属性值effectauto粗细由浏览器from-font如果第一个可用字体包含推荐的粗细值，将被使用，否则行为与自动Posi一致下划线的偏移量：text-underline-offset该属性主要控制下划线根据起始位置的偏移量。下划线效果的起始位置由text-underline-position控制，我们简单回顾一下这个属性。text-underline-position属性值效果autounderleftrightauto将下划线放置在基线位置，而under放置在元素文本内容的下方，left和right用于竖排的文本模式。回到text-underline-offset，下划线的位置首先是根据text-underline-position设置的初始位置，然后加上text-underline-offset设置的值。除了value设置，还支持以下属性Value：属性值效果auto由浏览器决定。如果第一个可用字体包含推荐的偏移值，则将使用适当的字体偏移量，否则行为与自动一致。修饰线效果的连续性用于文本使用下划线效果时，我们可能经常会发现下划线会与字符本身交叉，导致阅读体验不佳，因此text-decoration-skip的出现将解决这种类型的问题。正如属性名的字面意思：该属性用于设置修改行的省略位置。text-decorate-skip这个属性用来控制装饰线效果在文本中的什么地方被跳过。它支持以下属性值：属性值effectnoneskipsnothingobjectsskiphasdisplay:inline-blockeffect元素spaces跳过所有空格，edges跳过元素边界；例如：奇幻舞周刊，“奇舞”和“周刊”是由两个元素呈现的，那么在这两个元素的边界处，装饰线效果会被断开。由于元素紧密相连，为了保证效果，浏览器会相应缩短装饰线的长度，以保证断开效果。||盒子装饰|跳过盒子的margin、padding和border区域||前导空格|leading-spaces的效果是一样的，不过是用在text|text-decorate-skip-ink的末尾。那么对于汉字来说，原则上是没有基线概念的。当中文和英文同时出现时，可能会受到英文字符基线的影响，修改行的效果仍然覆盖中文字符。为了解决这个问题，标准中也制定了这个属性来很好的解决此类问题。这个属性只有两个属性值，一个是auto，一个是none。使用自动时，修剪线效果必须跳过所有绘制字形的区域。结束语感谢大家的观看，如有不足，欢迎批评指正。我是一个从事了五年的前端工程师。很多人私下问我，2019年前端怎么学，有什么方法吗？在这里推荐我的前端学习交流圈：784783012，里面全是从最基础的HTML+CSS+JS【炫酷特效、游戏、插件封装、设计模式】到移动端学习前端的学习资料HTML5项目全部整理好发给每一位前端小伙伴。最新技术，与企业需求同步。小伙伴们都在里面学习交流，每天都会有大牛定时讲解前端技术！点击：加入
