CSS揭秘-自定义下划线
常见的下划线问题
在日常开发中，我们可能遇到过设计师要求我们做出更加完美的下划线，可能要求我们修改下划线的颜色，下划线距离文本的距离，下划线的线型等等，当我们抛弃下划线的默认样式，我们还能通过哪些方法做出满足需求的文本下划线呢~ 接下来我们通过案例一起看一下吧~
通过边框的形式来实现下划线
可能很多开发都会像我一样，脑海中的想起的第一个方案就是通过边框来模拟下划线，如下代码：
/* css */
.container {
width: 185px;
border: 1px solid #000;
padding: 10px;
margin-right: 20px;
display: inline-block;
}
/* 使用边框的形式: 可以改变颜色 线宽 线型，但是与文本之间的间隙太大 */
.border-solve {
border-bottom: 1px solid red;
}
/* html */
<div class="container">
The key to <span class="border-solve">immortality is first living a life worth remembering</span> come on!
</div>
image
确实此方案为边框增加了很多可能性，比如我们可以去修改边框的颜色，宽度，以及线型，但是我们可以发现，这些“下划线”与文本之间的间隙太大了，甚至比字母的降部还要低，maybe我们可能需要一个更加完善的方法去实现下划线了~
通过背景图片来实现下划线（初级版）
我们知道背景是可以跟随换行的文本的，我们借助这个特性以及他的相关属性来实现一个更加完美的下划线吧~
/* css */
.container {
width: 185px;
border: 1px solid #000;
padding: 10px;
margin-right: 20px;
display: inline-block;
}
/* 使用背景可以完美跟随换行文本的特性，从而借助css的背景与边框的新特性来实现优化 */
.bg-gradient {
background: linear-gradient(red, red) no-repeat;
/*调整下划线的宽度占百分之百 宽度是1px */
background-size: 100% 1px;
/* 调整下划线的起始位置 左侧是0 上边是1.15em */
background-position: 0 1.15em;
}
/* html */
<div class="container">
The key to <span class="bg-gradient">immortality is first living a life worth remembering</span> come on!
</div>
image
yeah~ 此时的下划线已经很完美了，不过，我们发现下划线会穿过某些字母的降部，如果我们自定义的下划线在遇到字母会自动断开那应该更完美了吧~ 其实我们可以通过添加两层与背景色相同的text-shadow来模拟这种效果~ 来看一下具体的实现吧
通过背景图片来实现下划线（完美版）
比上一个版本多添加了一个text-shadow类
.container {
width: 185px;
border: 1px solid #000;
padding: 10px;
margin-right: 20px;
display: inline-block;
}
/* 使用背景可以完美跟随换行文本的特性，从而借助css的背景与边框的新特性来实现优化 */
.bg-gradient {
background: linear-gradient(red, red) no-repeat;
/*调整下划线的宽度占百分之百 宽度是1px */
background-size: 100% 1px;
/* 调整下划线的起始位置 左侧是0 上边是1.15em */
background-position: 0 1.15em;
}
.text-shadow {
/* 属性的第一个值表示水平位移，第二个值表示垂直位移，正值为偏右或偏下，负值为偏左或偏上，第三个值表示模糊半径（该值可选），第四个值表示阴影的颜色（该值可选） */
/* 0.05em表示字母降部的左右避开的小的间隙 */
text-shadow: .05em 0 #fff, -.05em 0 #fff;
}
/* html */
<div class="container">
The key to <span class="bg-gradient text-shadow">immortality is first living a life worth remembering</span> come on!
</div>
image
我们想要的效果都实现啦~ 此时的下划线也是极为灵活的，我们甚至可以通过此方法实现虚线，波浪线等
通过背景图片来实现波浪下划线（进阶版）
我们已经介绍了如何用背景图渐变实现下划线，同理我们也可以实现像文本编辑器高亮拼写错误时所用的那种波浪线的效果，我们直接看代码吧~
.container {
width: 185px;
border: 1px solid #000;
padding: 10px;
margin-right: 20px;
display: inline-block;
}
.wave-gradient {
/* 1.两条渐变出现的是xxxxx的形状 然后在进行等比缩放实现波浪形 2.还可以通过画很多圆形，利用圆形的一半来实现波浪形*/
background: linear-gradient(-45deg, transparent 40%, red 0, red 60%, transparent 0) 0 1em,
linear-gradient(45deg, transparent 40%, red 0, red 60%, transparent 0) .1em 1em;
background-repeat: repeat-x;
background-size: .2em .1em;
text-shadow: .05em 0 white, -.05em 0 white;
}
.text-shadow {
/* 属性的第一个值表示水平位移，第二个值表示垂直位移，正值为偏右或偏下，负值为偏左或偏上，第三个值表示模糊半径（该值可选），第四个值表示阴影的颜色（该值可选） */
/* 0.05em表示字母降部的左右避开的小的间隙 */
text-shadow: .05em 0 #fff, -.05em 0 #fff;
}
/* html */
<div class="container">
The key to <span class="wave-gradient text-shadow">immortality is first living a life worth remembering</span> come on!
</div>
image
总结
其实目前是有现成的css属性去直接定义下划线的样式的，只不过对浏览性的兼容性相当的糟糕，相信未来在定义下划线的样式时，不需要在用这些类似hack的方法。当然目前这个阶段还是希望这个hack的方法对大家有所帮助~ 同时我也罗列出相关新的属性以及其兼容性
text-decoration-color: 定义下划线的颜色
text-decoration-style: 定义下划线的风格，实线 虚线...
text-decoration-skip: 定义下划线是否避让空格 字母降部或其他对象
text-decoration-position: 定义下划线的的位置
image
[图片引用自MDN]
