前言：使用 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>
