5-3 文字编排 -- 自定义底线

知识储备

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

The only way to   
  get rid of a temptation is 
  to yield to it

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;

波浪线