本文介绍了如何使用CSS实现文字阴影和渐变色的叠加效果。首先通过text-shadow属性设置文字阴影，然后利用background-clip和透明颜色创建文字渐变。当直接叠加这两种效果时，发现阴影浮在了渐变文字上方。为解决这个问题，文章提出了一种创新方法：在原有元素上应用渐变色，然后创建一个伪元素::before，设置其阴影效果并置于底层，从而达到理想的阴影在渐变文字下方的效果。
1. CSS 实现文字阴影
通过text-shadow属性可以为文字设置阴影
.text-shadow {
font-size: 30px;
color: maroon;
text-shadow: 5px 5px 5px grey;
}
文字阴影
效果如下：
2. CSS实现文字阴影 + 文字渐变色
实现文字渐变色方法参考 CSS 实现文字渐变色
先把两种样式叠加一下看看：
body {
background-color: lightblue;
}
.text-shadow {
font-size: 30px;
font-weight: bold;
color: maroon;
text-shadow: 5px 5px 3px black;
}
.text-gradient {
background-image: linear-gradient(to bottom, blue, white, blue);
-webkit-background-clip: text;
color: transparent;
font-size: 30px;
}
文字渐变色+阴影
效果如下：
阴影浮在渐变文字上
很明显，阴影浮在了文字上方，不是我们想要的效果。这时候，换个思路试试：我们可以在原来的元素上实现文字渐变色效果，然后再创建一个新元素，实现文字的阴影效果，然后将两种效果进行叠加。代码如下：
body {
background-color: lightblue;
}
.text-gradient {
background-image: linear-gradient(to bottom, blue, white, blue);
-webkit-background-clip: text;
color: transparent;
font-size: 30px;
font-weight: bold;
}
.text-gradient::before {
content: attr(text);
position: absolute;
z-index: -1;
text-shadow: 5px 5px 3px black;
}
文字渐变色+阴影
阴影在渐变色文字下
扫一扫
1321
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
