【CSS】改良的链接下划线

【CSS】改良的链接下划线_第1张图片
微信订阅号:Rabbit_svip




【CSS】改良的链接下划线_第2张图片
微信订阅号:Rabbit_svip

此方法只适用于背景为纯色的情况下!!!

HTML代码

javascript

CSS代码

a {
    color: hotpink;
    text-decoration: none;
    text-shadow: 
        0.05em 0 0 #fff,
        -0.05em 0 0 #fff,
        0.1em 0 0 #fff,
        -0.1em 0 0 #fff,
        0 0.1em 0 #fff,
        0 -0.1em 0 #fff;
        background-image: linear-gradient(to right, currentColor 0%, currentColor 100%);
        background-repeat: repeat-x;
        background-position: bottom 0.05em center;
        background-size: 100% 0.05em;

}






因为下划线往往直接放在字体基线下面,会穿过像字母g、j、y等字母降部,降低了链接文本的可读性。理想的情况下,下划线应该留一点空间,不跟字符相交。

上面的代码是利用了文字阴影(这里的背景色是白色,所以文字阴影也设置成白色),让文字外有一个“保护层”。再通过设置渐变背景色的方法实现自定义下划线。

这种方法的好处:
下划线的颜色、位置都可以自定义调节,甚至可以把下划线做成渐变色。
下划线的厚度可以调节。
下划线的位置可以调节。

对于不支持渐变背景的旧浏览器,降级方案是没有下划线。这种方法不会影响整体布局。

缺点:
文字的父级背景只能是纯色的情况下才能使用这种方法。





HTML与CSS 目录:HTML与CSS

上一篇:【CSS】不规则阴影

你可能感兴趣的:(【CSS】改良的链接下划线)