CSS3 的text-shadow實現立體文字和燃燒文字
立體文字演示效果如下：
程式碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
p{
text-align: center;
background: #CCC;
font-size: 40px;
font-weight: bold;
color: #D1D1D1;
text-shadow: -2px -2px white,
2px 2px #333;
}
</style>
</head>
<body>
<p>html5 + css3</p>
</body>
</html>
燃燒效果如下：
程式碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
body{
background: #000;
}
p{
text-align: center;
font-size: 40px;
font-weight: bold;
color: red;
text-shadow: 0 0 4px white,
0 -5px 4px #ff3,
2px -10px 6px #fd6,
-2px -15px 11px #f80,
2px -25px 18px #f20;
}
</style>
</head>
<body>
<p>html5 + css3</p>
</body>
</html>