前言:使用 text-shadow 给文字添加好看的阴影
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
height: 100vh;
background: linear-gradient(45deg, #cfcfcf, #e6e6e6);
display: flex;
align-items: center;
justify-content: center;
}
h1 {
font-size: 20vmin;
line-height: 1;
letter-spacing: 5px;
color: #e6e6e6;
text-align: center;
}
.good-look {
text-shadow: 1px -1px #fff, -1px 1px #999, -10px 10px 5px #80808080;
}
</style>
</head>
<body>
<h1 class="good-look">这是一个好看的字体阴影</h1>
</body>
</html>