知識儲備
1.linear-gradient
2.text-shadow
這兩個知識點應(yīng)該很熟悉了凹蜈，在前幾節(jié)中都有提到
3.text-decoration 屬性規(guī)定添加到文本的修飾
小測試
先來看看我們需要的效果吧
![自定義下劃線]R$$1PO.png](http://upload-images.jianshu.io/upload_images/1808805-bce3806804c3d914.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
為什么我們不選擇text-decoration呢限寞？看下圖：
不優(yōu)雅的下劃線
自定義下劃線
html
<p>The only way to
<a href="#">get rid of a temptation is</a>
to <a href="#">yield</a> to it
</p>
css
為我們的文字塊設(shè)置一點樣式，這里不是關(guān)鍵
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;
這里設(shè)置background-size的目的是為了
1.設(shè)置下劃線高度
2.當我們換行或者制造虛線等情況下仰坦，能夠較好的呈現(xiàn)我們的效果
3.將下劃線往下移動
background-position: 0 1.1em;
此時的效果還不是很好履植，會發(fā)現(xiàn)與字母會有交錯
與g/y等字符有交錯
4.通過設(shè)置字體陰影來覆蓋交錯
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.制作波浪線略微復(fù)雜
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;
波浪線
