前言
该文作为《文字到底能玩出多少花样》的第二篇文章，带大家学习 background-clip实现hover文字填充效果 。
基础知识
在文章的最开始，还是带大家来学习几个预备小知识。
background-clip: 设置元素的背景（背景图片或颜色）是否延伸到边框、内边距盒子、内容盒子下面。有四个属性值，下面来一一介绍一下:
border-box: 背景延伸至边框外沿（但是在边框下层）padding-box: 背景延伸至内边距（padding）外沿。不会绘制到边框处content-box: 背景被裁剪至内容区（content box）外沿text: 背景被裁剪成文字的前景色
具体属性值演示可以参考: background-clip
-webkit-text-stroke: 文字描边效果的宽与颜色，详情可以见下面案例。
<style> .stroke { -webkit-text-stroke: 2px red; font-size: 200px; } </style> <p class="stroke"></p> 复制代码
代码实现
描边文字实现
在基础知识部分，讲解过 -webkit-text-stroke 属性，可以设置文字描边，但文字颜色会和描边颜色同时存在(详情见上图)，此时只需要设置 color: transparent 将文字颜色置为透明色，就可以实现只有描边，文字部分镂空的效果。
具体见下面代码和绘制完的描边文字图像
a { font-size: 100px; text-decoration: none; text-transform: uppercase; -webkit-text-stroke: 2px #198ce6; color: transparent; transition: 0.5s linear; } 复制代码
background-clip设置
background-clip: text 可以把背景裁剪成文字的前景色，设置背景颜色为 #198ce6，再通过 background-clip: text 就可以控制背景在文字镂空部分显示。
background: linear-gradient(#198ce6 0 100%) no-repeat; -webkit-background-clip: text; background-clip: text; 复制代码
设置后的效果如下:
设置hover动画效果
上面已经成功设置了背景在文字镂空部分显示，那么剩下就只有动画部分待实现。 CSS3 提供了 transition 属性可以设置简单的动画，因此只需将背景色默认值设置为 0 ，hover 时恢复 100% 就能实现封面效果。
a{ background: linear-gradient(#198ce6 0 100%) left/0 no-repeat; transition: 0.5s linear; } a:hover { background-size: 100%; } 复制代码
源码仓库
传送门: background-clip实现hover文字填充效果
