【黑师音画帖小白教程】第十五讲：文本阴影和使用元素背景渲染文本
第十五讲：文本阴影和使用元素背景渲染文本
音画帖离不开对文本的处理。关于文本的CSS知识我们不打算做全面的介绍，用到时会略作解释。本讲主要讲讲文本阴影和使用元素背景渲染文本，先从文本阴影开始。文本阴影有专属的CSS属性，text-shadow，和刚介绍的元素阴影 box-shadow 有很多相近之处。来看看经典的文本阴影设置：
<style>
/* 给元素设置文本相关等属性 */
.tbox1 {
padding: 6px; /* 元素的内边距 ：令盒子里面的内容与边缘拉开距离 */
font: bold 2em/2.4em sans-serif; /* 文本语法糖设置 ：粗细 + 尺寸/行间距 + 字体 */
color: plum; /* 文本颜色即前景色 */
text-shadow: 2px 2px 4px #000; /*文本阴影属性 ：X偏移量 + Y偏移量 + 模糊半径 + 颜色 */
border: 1px solid gray; /* 边框用于观察 */
}
</style>
<div class="tbox1">
Hello World! 你好世界！
</div>
text-shadow 用来设置文本阴影，XY偏移量支持正负数，原理与 box-shadow 的一致。当文本阴影如果仅用于立体化文本时，不宜用过大的偏移量，模糊半径也一样，而阴影颜色理论上应有别于前景色但也不一定；有时我们会将阴影偏移量设计的比较大，比如营造文本投影效果：
<style>
.tbox2 {
padding: 6px;
font: bold 2em/2.4em sans-serif;
color: black;
text-shadow: -6px -35px 4px silver; /* 投影效果的文本阴影设置 */
}
</style>
<div class="tbox2">
Hello World! 你好世界！
</div>
和盒子阴影一样，文本阴影同样支持多重阴影，各组阴影代码语句之间也是用逗号隔开。多重文本阴影可以渲染出丰富的文本效果，试看如下简单的多重文本阴影示例：
<style>
.tbox3 {
padding: 6px;
font: bold 2em/2.4em sans-serif;
color: white;
text-shadow:
-1px -1px 2px tan,
1px 1px 2px gray,
2px 2px 3px red,
3px 3px 4px green;
}
</style>
<div class="tbox3">
Hello World! 你好世界！
</div>
和box-shadow属性一样，text-shadow属性多重阴影不会将前面的阴影当做克隆对象。但可以考虑给有文本内容的元素使用drop-shadow子滤镜来实现阴影克隆阴影的效果。
下面讲讲使用元素的背景图像来渲染文本，这需要给元素添加一个 background-clip 属性，这是背景剪裁属性，当其值为 text 时，元素的背景仅呈现在文本的笔画上。当然，还需要文本的颜色应是透明的，试看如下例子，我们给元素设置的图片只对文本进行渲染，元素的其他地方看不到背景图片的身影：
<style>
.tbox4 {
padding: 6px;
font: bold 3em sans-serif;
color: transparent; /* 前景色设置为透明 */
background: url('https://638183.freep.cn/638183/t22/gif/121.gif') repeat;
background-clip: text; /* 将背景图像剪裁按文本剪裁 */
--webkit-background-clip: text; /* 兼容chromium内核 ＜ 120 */
/* 若需要文本阴影应使用 filter 实现，因为 text-shadow 会入侵透明的前景色 */
filter: drop-shadow(2px 2px 2px #666);
}
</style>
<div class="tbox4">
Hello World! 你好世界！
</div>
上例闪烁的效果是GIF动图营造出来的。实际应用场景中，我们也可以为文本设计出动态的效果，例如花潮格式的lrc歌词同步插件有一些就是利用渐变背景与元素或元素背景的尺寸的动态变化来实现的。以下文本颜色渐变动态效果利用 background-position 属性即背景位置的CSS关键帧动画加以实现：
<style>
.tbox5 {
padding: 6px;
width: fit-content; /* 元素宽度随子内容而定 */
height: fit-content; /* 元素高度度随子内容而定 */
font: bold 3em sans-serif;
color: transparent;
background: linear-gradient(to right, cyan, teal, orange, teal, cyan) no-repeat 0/200% 100%;
background-clip: text;
--webkit-background-clip: text;
filter: drop-shadow(2px 2px 2px #666);
animation: bgmove 3s linear infinite alternate;
}
@keyframes bgmove { to { background-position: 100% 0; } }
</style>
<div class="tbox5">
Hello World! 你好世界！
</div>
本讲主要学习文本阴影 text-shadow 和使用元素背景图像渲染文本 background-clip 两个文本修饰属性，用好它们可以给文本添色、营造炫酷的文本特效。本讲作业相对简单：请使用静图或动图做元素的背景，令背景图像仅渲染在文本上，并让文本投射在偏右一点点的后方。
评论列表 [0条]
