&nbs p;
一、text-decoration:underline下划线的问题
CSS text-decoration:underline 可以给内联文本增加下划线，但是，如果对 细节 要求较高，就会发现，下划线经常会和中文文字的下边缘搞在一起，英文的话甚至直接穿越，看起来就比较香菇蓝瘦。
上图几个中文下边缘正好都是横线，结果，可以看到，基本上合在一起分不清谁是谁了，换成 微软雅黑 字体（见下图），似乎变本加厉了：
有没有什么办法让下划线不要靠得这么近， 或者 文字可以完整清晰地显示呢？
有，方法还不少，下面逐一介绍，大家可以根据自己的实际项目需求，选择合适的技 术 选型。
方法一：text-decoration -s kip指定覆盖关系
理论上，使用下面的CSS：
a { text-decoration-skip: ink; } 机会 有类似下图的效果：
text-decoration-skip 是 text-decoration 相关的CSS3新的属性，还有很多其他新的CSS3 text-decoration 属性，可以指定下划线类型等，具体可参见我之前的 文章 ：“ 了解 CSS3 text-decoration新特性新表现”。
看上去效果很不错，但是遗憾的是，即使现在快到2017年了，此属性的浏览器支持情况还是很不乐观，包括大头Ch rom e浏览器目前尚未支持。
Safari 8+ supports - webkit -t ext-decoration-skip w IT h values none and skip (other values behave like none or skip)
目前也就是Safari 8+浏览器支持带 -webkit- 私有前缀的 text-decoration-skip 属性，且仅仅支持 skip （默认值）和 none 两个值，换句话说，Safari 8+浏览器默认下划线就是和文字非穿越而是避让效果。这进一步导致CSS代码中没有 text-decoration-skip 属性出现的必要了。所以，此方法虽然最原生，但时机还不够。
方法二：使用border-bottom属性模拟
内联元素虽然不支持垂直 方向 的 m arg in 属性，但是支持垂直方向的 padding 属性和 border 属性，并且，对 原来 的布局定位等没有任何影响。因此，配合 padding ，我们就可以很有效地 调节 下边框和文字下边缘的 距离 ，实现我们最想要的的效果，类似下面的CSS代码：
a { text-decoration: none; border-bottom: 1px solid; } 效果类似下图：
如果 觉得 border-bottom 模拟的下划线还是和文字走得太近，我们可以使用 padding-bottom 再撑开点距离，例如：
a { text-decoration: none; border-bottom: 1px solid; padding-bottom: 5px; } 则效果类似下面截图：
眼见为实，您可以狠狠地点击这里：border-bottom模拟下划线文字无重叠demo
注意，使用 border-bottom 模拟下划线的时候， border-color 最好缺省，这样就会使用文字的 color 颜色作为边框色，这样，鼠标 hover 的时候，下划线会自动和文字一起变色，类似下图效果：
使用 border-bottom 模拟的另外一个好处就是我们还可以使用虚线下划线：
a { text-decoration: none; border-bottom: 1px dashed; } 类似下面实际项目需求的截图就可以使用这种策略：
方法三：使用box-shadow属性模拟
我们也可以使用CSS3 box-shadow 属性模拟下划线，代码如下：
a { text-decoration: none; box-shadow: 0 1px; } 同样，建议颜色值缺省，使用 color 属性的颜色值。
效果基本上和 border-bottom 如出一辙，如下截图：
眼见为实，您可以狠狠地点击这里：box-shadow模拟下划线效果demo
相比 border-bottom 属性， box-shadow 的优势在于，即 使我 们把内联元素设置成 dis play :inline-block ，生成的下划线也不会对垂直对齐或者布局产生影响，但，如果是 border-bottom ，会 增加元素 的 尺寸 ，可能就会影响元素的排列。
但是， box-shadow 也有不足，一是兼容性，IE9+才支持，二是只能实线，不能虚线。
方法四：使用background -i mage属性模拟
就是使用CSS3渐变 绘制 实线或虚线背景图。
效果截图如下：
相关CSS代码如下：
.solid { padding-bottom: 2px; background-image: linear-gra die nt(to top, current Color, currentColor 1px, transparent 1px); } .dashed { padding-bottom: 2px; background: linear-gradient(to right, currentColor, currentColor 4px, transparent 4px) re PE at-x 0 bottom/7px 1px; } 由于背景图片是在原本区域内显示，有别于 border-bottom 或者 box-shadow 区域外显示，因此，实现的下划线实际上和文字还是很近的，尤其类似 yqp 这种基线以下的字母，就会合体。一般有两种处理 手段 ，一种是文字增加 白色 描边，类似下面CSS：
a { text-shadow: 0 1px # fff, 0 -1px #fff, 1px 0 #fff, -1px 0 #fff; } 效果类似下面这样：
第二种就是使用 padding-bottom 对内联元素增加可视高度。所以，上面实线下划线和虚线下划线均有 padding-bottom:2px 的设置。
眼见为实，您可以狠狠地点击这里：background-image模拟下划线效果demo
对了，突然想起来，demo中的下划线使用的是 currentColor 变量，但是在C hr ome浏览器和IE浏览器下， currentColor 作为背景图片色值的时候，当 :hover 改变 元素的 color 颜色值的时候，背景图片颜色并不会跟着变，Firefox浏览器的表现符合预期，因此，如果使用此方法，需要 :hover 时候，背景图片重新绘制下。
使用 background-image 绘制的好处在于，我们对样式的控制更灵活的，例如我们可以把线放在文字的后面，我们可以上下划线，我们控制虚线的稀松程度，我们也可以使用 圆 点表示虚线，我们甚至也可以使用径向渐变绘制波浪样子的下划线，甚至可以把线做成倾斜的 等等 。不足在于IE10+浏览器才支持。
方法五：使用SVG滤镜处理
该SVG滤镜相关HT ML 代码如下：
<svg class="out"> <filter id="svg-underline" PR imitiveUnits="objectBoundingBox"> <!-- 原图文基础上水平垂直方向 一点 点扩展并存储到新的层上 --> <feMorpho LOG y in="SourceGraphic" opera tor="dilate" radius="0.0075 0.05" result="outline"></feMorphology> <!-- 一个蓝色矩形，高度3%然后 宽 度100%，位置稍微往下一点 --> <feFlood flood-color="#34538b" width="1" h ei ght="0.03" x="0" y="0.9" result="underline"></feFlood> <!-- 遮罩蓝色矩形，这样，文字重合部分边缘会镂空 --> <feComposite in="underline" in2="outline" operator="out" result="underline"></feComposite> <!-- 效果合体 --> <feMerge> <feMergeNode in="underline"></feMergeNode> <feMergeNode in="SourceGraphic"></feMergeNode> </feMerge> </filter> </svg>
相关CSS代码如下：
a { -webkit-filter: url('#svg-underline'); filter: url('#svg-underline'); text-decoration: none; } 然后，实现的效果类似下面的截图（截自Chrome浏览器）：
看上去很麻烦很啰嗦，hover变色还需要另外的处理，SVG滤镜兼容性并不乐观，IE现在都不支持，所以，这种方法的意义在哪里？
意义就在于可以实现真正意义上的 text-decoration-skip 效果，也就是下划线和文字重叠的位置自动从文字下面穿过，并且附近完全是真正的透明，仔细看上面截图，可以看到，文字和下划线接触的位置的地方，看上去有1像素的接触点是透明的。
原生的Safari外加SVG滤镜下的Chrome/Firefox，也就是绝大多数浏览器都可以实现下划线和文字自动接触点镂空的效果。
眼见为实，您可以狠狠地点击这里：使用SVG滤镜模拟下划线demo
方法六：使用canvas实现（著名的Underline.js）
Underline.js项目地址：https://gith ub .COM /wentin/underlineJS
作者是这位妹纸（图片 源 自网络）：
zhangwenting，目前任职于 Adobe Typekit。
underline.js同样实现的是下划线和文字重叠自动避让的效果，类似下图：
您可以狠狠地点击这里：canvas原理的underline.js解决下划线重叠demo
基本上，下划线文字穿越效果只有英文才好看，中文如果穿越，我去，基本上下划线就没了，尤其类似“金玉全王”这样的汉字：
所以，对于中文，最好的效果还是避让，就是直接线和文字留点距离，这样是最好的。对于，英文为主的内容，则 text-decoration-skip 效果确实还是挺有 价值 的。
根据我自己对underline.js的使用，发现，局限性还不小，内联元素最好要 inline-block 化，纯 inline 生成的canvas的垂直位置不是很 精准 ，然后，不支持文字自动换行下划线折线显示，毕竟canvas元素是个独立的替换元素，跟图片一样，不可能换行时候分一 半 上面再一半下面。
基本上，适合用在局部一些大的标语，标题，slogon等位置或者追求视觉的 官方 网站或 活动 页面上使用。
八、结束语
今天群里都在玩风景照一下子变成动漫风格的滤镜，实际上，使用PS，分分钟 搞定 。
我特意找了张 质量 很差的自己钓鱼拍的风景图，PS中滤镜搞搞， 2分 钟，就好了，效果如下：
效果还行，如果换个清晰明丽的图，效果会更好。
步骤如下：
1. 滤镜→滤镜库→干 画笔 →0 10 1！
2. 滤镜→C am era Raw滤镜→色温高，色调绿，曝光增加，对比对增加，阴影和黑色最大，饱和度和清晰度适当增加，然后第三个“细节”小按钮，数量和 蒙版 很大的值，半径和细节自己看着调；
3. done!
本文内容参考自：Styling Underlines on the Web
感谢阅读，欢迎交流！
（本篇完）
觉得可用，就经常来吧！ 欢迎评论哦！ html5教程 ，巧夺天工，精雕玉琢。小宝典献丑了！
总结
以上是 为你收集整理的 html5教程-解决文字和text-decoration:underline下划线重叠问题 全部内容，希望文章能够帮你解决 html5教程-解决文字和text-decoration:underline下划线重叠问题 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于html5教程-解决文字和text-decoration:underline下划线重叠问题的详细内容...