知识储备
1.linear-gradient
2.text-shadow
这两个知识点应该很熟悉了，在前几节中都有提到
3.text-decoration 属性规定添加到文本的修饰
小测试
先来看看我们需要的效果吧
![自定义下划线]R$$1PO.png](http://upload-images.jianshu.io/upload_images/1808805-bce3806804c3d914.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
为什么我们不选择text-decoration呢？看下图：
不优雅的下划线
自定义下划线
html
<p>The only way to
<a href="#">get rid of a temptation is</a>
to <a href="#">yield</a> to it
</p>
css
为我们的文字块设置一点样式，这里不是关键
p{
width: 100px;
border: 2px solid #cccccc;
border-radius: 5px;
padding: .5em;
word-break: break-all;
}
为我们的a标签下划线制定以下样式
a{
text-decoration: none;
background: linear-gradient(90deg, gray 100%, transparent 0) repeat-x;
background-size: .5em 1px;
background-position: 0 1.1em;
text-shadow: .08em 0 white, -.08em 0 white;
}
1.我们先将原样式去掉
text-decoration: none;
2.利用background-image来模拟下划线
background: linear-gradient(90deg, gray 100%, transparent 0) repeat-x;
background-size: .5em 1px;
这里设置background-size的目的是为了
1.设置下划线高度
2.当我们换行或者制造虚线等情况下，能够较好的呈现我们的效果
3.将下划线往下移动
background-position: 0 1.1em;
此时的效果还不是很好，会发现与字母会有交错
与g/y等字符有交错
4.通过设置字体阴影来覆盖交错
text-shadow: .08em 0 white, -.08em 0 white;
更多
1.制作虚线
只需将上述的
background: linear-gradient(90deg, gray 100%, transparent 0) repeat-x;
改为
background: linear-gradient(90deg, gray 50%, transparent 0) repeat-x;
虚线
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;
波浪线
