CSS3中新增了text-shadow样式，text-shadow用来设置文本阴影，详解见 https://developer.mozilla.org/zh-CN/docs/Web/CSS/text-shadow 。
以下为利用阴影设置的几种样式 1、浮雕文字
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> h1{ text-align: center; color: white; font: 200px/300px "微软雅黑"; text-shadow: 2px 2px 200px black; } </style> </head> <body> <div id="fd"> <h1>上海</h1> </div> </body> </html>2、文字模糊
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> /*transition: 2s表示2s后执行操作*/ h1{ text-align: center; font-weight: bold; font-size: 100px; color: red; transition: 2s } h1:hover{ color: rgba(0, 0, 0, 0); text-shadow: 0 0 100px gray; } </style> </head> <body> <h1>上海</h1> </body> </html>鼠标未放置字体上，显示如下：
鼠标放到字体上显示 红线标的地方为样式。
3、文字阴影
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #sh{ width: 300px; height: 300px; font-size: 100px; margin: 50px auto; text-shadow: 10px 10px 10px gray; } </style> </head> <body> <div id="sh"> 上海 </div> </body> </html>