text-decoration属性
⼀、在CSS1中，text-decoration有六个值：
text-decoration:none  //默认，定义标准的⽂本，没有任何样式，正常显⽰
text-decoration:underline  //定义⽂本下的⼀条线
text-decoration:overline  //定义⽂本上的⼀条线
text-decoration:line-through  //定义⽂本中间的⼀条线
text-decoration:blink  //定义闪烁的⽂本， IE、Chrome 或 Safari 不⽀持 "blink" 属性值。
text-deration:inherit  //从⽗元素继承text-decoration的值，任何的版本的 Internet Explorer （包括 IE8）都不⽀持属性值 "inherit"。
展⽰形式如下：
text-decoration还⽀持多值属性，如text-decoration:underline overline；经个⼈测试此多值属性可兼容⾄IE8，IE7不兼容（有的同学测试IE7兼容，此情况需⾃测）
⼆、CSS3中新增了⼀些属性：
textstyletext-decoration:[text-decoration-line] [text-decoration-style] [text-decoration-color]
text-decoration-line就相当于css1中所讲的那⼏个属性
text-decoration-style：solid（实线，默认） | double（双线） | dotted（点状线） | dashed（虚线） | wavy（波浪线） 浏览器⽀持性不好
text-decoration-color：默认为⽂本的颜⾊，可⾃设装饰颜⾊  浏览器⽀持性不好
三、text-decoration-skip：none | [ objects || spaces || ink || edges || box-decoration ]  ⽬前还没有什么浏览器⽀持这个属性
当字符和装饰线发⽣重叠关系的时候，例如，删除线，或者⼀些英⽂字符(g, q)和下划线，我们的装饰线是跳过⽂字字符，还是直接连在⼀起穿过去。举个例⼦吧，如下CSS：
a { text-decoration-skip: ink; }
可能最后的表现会是这样：
text-decoration-skip⽀持的⼀些值以及含义如下：
objects: 默认值。 装饰线跳过内联对象，⽐⽅说图⽚啊或者inline-block元素。
none: 装饰线穿过⼀切，包括本应跳过的内联对象。
spaces: 装饰线跳过空格或字符间分隔，以及letter-spacing或word-spacing形成的间距。
ink: 装饰线跳过符号或下沉字母。
edges: 装饰性起始于内容起始边缘后⾯，结束语内容结束边缘的前⾯。这个属性值的⽬的是为了让两个搞在⼀起的下划线元素看上去
公⽤⼀条下划线。这对于中⽂字体很有⽤，因为会使⽤下划线作为标点符号。
box-decoration: 装饰线跳过继承的margin, border, 以及padding.
trailing-spaces: 装饰线跳过pre或white-space: pre-wrap⾥⾯前后空格。
效果如下图⽰意：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。