1. CSS 实现文字阴影
通过text-shadow属性可以为文字设置阴影
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
.text-shadow {
font-size: 30px;
color: maroon;
text-shadow: 5px 5px 5px grey;
}
</style>
</head>
<body>
<span class="text-shadow">文字阴影</span>
</body>
</html>
效果如下：
2. CSS实现文字阴影 + 文字渐变色
实现文字渐变色方法参考 CSS 实现文字渐变色
先把两种样式叠加一下看看：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
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;
}
</style>
</head>
<body>
<span class="text-shadow text-gradient">文字渐变色+阴影</span>
</body>
</html>
效果如下：
阴影浮在渐变文字上
很明显，阴影浮在了文字上方，不是我们想要的效果。这时候，换个思路试试：我们可以在原来的元素上实现文字渐变色效果，然后再创建一个新元素，实现文字的阴影效果，然后将两种效果进行叠加。代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
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;
}
</style>
</head>
<body>
<span class="text-gradient" text="文字渐变色+阴影">文字渐变色+阴影</span>
</body>
</html>
阴影在渐变色文字下
网友评论