解决文字和text-decoration:underline下划线重叠问题

来源：互联网发布：ip网络摄像头监控软件编辑：程序博客网时间：2024/04/30 09:10

纸上得来终觉浅，绝知此事要躬行
之前看了张鑫旭大神的一篇文章，今天做项目终于用到了，决定记录一下，防止忘记，原文链接如下：
http://www.zhangxinxu.com/wordpress/2016/11/css-text-decoration-underline-skip-override/

一.在项目中用到了border-bottom的属性

html

<a class="mailStyle" href="mailto:123456@qq.com">123456@qq.com</a></span>

css

.mailStyle{    margin-left:10px;    display: inline;    color:#999999;    border-bottom: 1px solid;    padding-bottom: 3px;    text-decoration:underline;}

注：如果不对border设置颜色，边框颜色将会和字体颜色一致，在a触发hover等，下划线也会跟着文字一起变色

二.其他的一些方法

1.text-decoration-skip指定覆盖关系
不足：

此图来自张鑫旭博客截图
注：截图来自张鑫旭博客

2.使用box-shadow属性模拟

.class2{    text-decoration: none;    box-shadow: 0 1px;    padding-bottom:5px;}

3.background-image属性模拟

.class3{    text-decoration: none;    background-image: linear-gradient(to top,currentColor,currentColor 1px,transparent 1px);    padding-bottom:5px;    }.class3:hover{    text-decoration: none;    background-image: linear-gradient(to top,currentColor,currentColor 1px,transparent 1px);    padding-bottom:5px;}

图片来自张鑫旭博客
注：截图来自张鑫旭博客

4.还有使用SVG滤镜处理，使用canvas实现（著名的Underline.js）的方法，原博主已经做了详述，本文不再做纪录

三.完整代码

<!doctype html><html><head>    <meta charset='utf-8' />    <title>模拟a表签下划线</title></head><style type="text/css">    div{        padding:5px;    }    a{        /*text-decoration: none;*/        font-size: 24px;        color:#000;    }    a:visited,a:hover,a:active{        /*text-decoration: none;*/        color:pink;    }    .class1{        text-decoration: underline;        text-decoration-skip: ink;    }    .class2{        text-decoration: none;        box-shadow: 0 1px;        padding-bottom:5px;    }    .class3{        text-decoration: none;        background-image: linear-gradient(to top,currentColor,currentColor 1px,transparent 1px);        padding-bottom:5px;    }    .class3:hover{        text-decoration: none;        background-image: linear-gradient(to top,currentColor,currentColor 1px,transparent 1px);        padding-bottom:5px;    }</style><body>    <div><a href="1111" class="class1">text-decoration-skip指定覆盖关系</a></div>    <div><a href="1111" class="class2">box-shadow属性模拟</a></div>    <div><a href="1111" class="class3">background-image属性模拟</a></div></body></html>

0 0