CSS3设置文字阴影效果，对文字字体设置阴影效果，采用text-shadow样式，本来在CSS2版本中也有此属性，但在CSS3中文字阴影text-shadow再次被应用，丰富文字排版布局美化效果。
CSS3单词与语法
CSS3单词：
text-shadow语法结构：
text-shadow: 5px 2px 6px black;
5px 代表着：
阴影距离文字左5px显示2px 代表着：
阴影距离文字上2px显示6px 代表着：
阴影大小范围black 代表着：
阴影颜色为黑色例子：
XML/HTML Code复制内容到剪贴板 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .All-orange { font: normal 14px 微软雅黑,sans-serif; max-width: auto; max-height: auto; background-color: #f8f8f8; padding: 30px 30px 20px 30px; color: #666; border-radius: 5px } .All-orange h1 { font: normal 32px 微软雅黑,sans-serif; padding: 20px 0 20px 40px; display: block; margin: -30px -30px 10px -30px; color: #FFF; background-color: #0CF; border-radius: 5px; text-shadow:5px 2px 6px #000; box-shadow: 5px 2px 6px #000; } .All-orange img { float: left } .All-orange h1 img{ margin-top: -15px; } </style> </head> <body> <div class="All-orange" id="all"> <h1><img src="../img/launcher_icon_.png" /> 悲伤黑白棋 </h1> </div> </body> </html>效果图：
浏览器兼容
此属性为CSS3样式IE9以上版本浏览器支持、谷歌浏览器支持。
以上就是利用CSS3 text-shadow实现的文字阴影效果，希望对大家的学习有所帮助。
