你所不知道的字体下划线

你所不知道的字体下划线

上周的一个项目涉及到关于文本下划线的问题，觉得还是用的地方很多，私下就研究了一下相关技术实现。
觉得写到博客里面还是挺有用的，因此写个笔记吧。

关于下划线，css有他的独有属性,text-decorate:underline。但是这个局限于浏览器默认样式。
对于线宽，线型，以及颜色都无法控制。因此我们去思考，关于这种下划线怎么实现。我们思考，发现对于下划线可以用
border控制它的颜色与宽度，以及距离字之间的间隙。

• 1. border实现

     display:inline-block;
     border-bottom:1px solid orange;
     text-decorate:none;
     font-size:14px;
     line-height:1.2;
     height:22px;

第二种方法是通过background实现的。

• 1. background实现

     html:
     <p>“The only way to <a>get rid of a temp­ta­tion</a> is to <a>yield</a> to it.”</p>
     css:
     background: linear-gradient(gray, gray) no-repeat;
     background-size: 100% 1px;
     background-position: 0 1.15em;(相对于字体的顶端的距离)

这里用到关于线性渐变的知识点，具体可参考
线性渐变
对于以上页面的实现会出现相关问题，下划线会穿过字体，因此建议对字体做一下处理
text-shadow: .05em 0 white, -.05em 0 white; white为背景颜色。
text-shadow

---

• ← Previous Post
• Next Post →