立体文字特效
使用CSS实现立体文字，首先在页面上准备好这么一个文字<h1>立体文字</h1>,给h1设置一个字体大小
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
text-align: center;
background: rgb(12, 208, 172);
color: #fff;
}
h1 {
font-size: 5em;
}
</style>
</head>
<body>
<h1>立体文字</h1>
</body>
</html>得到一个效果
然后设置文字阴影：先设置一个向左向下的阴影text-shadow: -1px 1px #bbb;这样就有阴影了；
文字阴影是可以设置多个，可以继续给文字设置阴影，让他的阴影偏移的更多
h1 {
font-size: 5em;
text-shadow:
-1px 1px #bbb,
-2px 2px #bbb,
-3px 3px #bbb,
-4px 4px #bbb,
-10px 10px 3px #000;
}从图中就可以看到，已经给文字设置了一个立体阴影
如果把页面放大，可以看到文字边缘部分出现了一个阶梯状的形式，他阴影分层结构就显现出来了
全部代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
text-align: center;
background: rgb(12, 208, 172);
color: #fff;
}
h1 {
font-size: 5em;
text-shadow:
-1px 1px #bbb,
-2px 2px #bbb,
-3px 3px #bbb,
-4px 4px #bbb,
-10px 10px 3px #000;
}
</style>
</head>
<body>
<h1>立体文字</h1>
</body>
</html>