CSS3的文字阴影—text-shadow
2014-05-10 10:54
671 查看
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS3的文字阴影—text-shadow</title> <style> body{margin: 0;padding: 100px;} .example{ background: #666666; width: 440px; padding: 30px; font: bold 55px/100% "微软雅黑", "Lucida Grande", "Lucida Sans", Helvetica, Arial, Sans;; color: #fff; text-transform: uppercase; } .example1{ -webkit-text-shadow: red 0 0 10px; -moz-text-shadow: red 0 0 10px; -ms-text-shadow: red 0 0 10px; -o-text-shadow: red 0 0 10px; text-shadow: red 0 0 10px; } .example2{ -webkit-text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de ; -moz-text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de ; -ms-text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de ; -o-text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de ; text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de ; } .example3{ color: #000; -webkit-text-shadow: 0 1px 1px #fff; -moz-text-shadow: 0 1px 1px #fff; -ms-text-shadow: 0 1px 1px #fff; -o-text-shadow: 0 1px 1px #fff; text-shadow: 0 1px 1px #fff; } .example4{ color: #ccc; -webkit-text-shadow: -1px -1px 0 #fff, 1px 1px 0 #333 , 1px 1px 0 #444; -moz-text-shadow: -1px -1px 0 #fff, 1px 1px 0 #333 , 1px 1px 0 #444; -ms-text-shadow: -1px -1px 0 #fff, 1px 1px 0 #333 , 1px 1px 0 #444; -o-text-shadow: -1px -1px 0 #fff, 1px 1px 0 #333 , 1px 1px 0 #444; text-shadow: -1px -1px 0 #fff, 1px 1px 0 #333 , 1px 1px 0 #444; } .example5{ color: transparent; -webkit-text-shadow: 0 0 5px #f96; -moz-text-shadow: 0 0 5px #f96; -ms-text-shadow: 0 0 5px #f96; -o-text-shadow: 0 0 5px #f96; text-shadow: 0 0 5px #f96; } .example6{ color: #fff; -webkit-text-shadow: 1px 1px rgba(197, 223, 248,0.8),2px 2px rgba(197, 223, 248,0.8),3px 3px rgba(197, 223, 248,0.8),4px 4px rgba(197, 223, 248,0.8),5px 5px rgba(197, 223, 248,0.8),6px 6px rgba(197, 223, 248,0.8); -moz-text-shadow: 1px 1px rgba(197, 223, 248,0.8),2px 2px rgba(197, 223, 248,0.8),3px 3px rgba(197, 223, 248,0.8),4px 4px rgba(197, 223, 248,0.8),5px 5px rgba(197, 223, 248,0.8),6px 6px rgba(197, 223, 248,0.8); -ms-text-shadow: 1px 1px rgba(197, 223, 248,0.8),2px 2px rgba(197, 223, 248,0.8),3px 3px rgba(197, 223, 248,0.8),4px 4px rgba(197, 223, 248,0.8),5px 5px rgba(197, 223, 248,0.8),6px 6px rgba(197, 223, 248,0.8); -o-text-shadow: 1px 1px rgba(197, 223, 248,0.8),2px 2px rgba(197, 223, 248,0.8),3px 3px rgba(197, 223, 248,0.8),4px 4px rgba(197, 223, 248,0.8),5px 5px rgba(197, 223, 248,0.8),6px 6px rgba(197, 223, 248,0.8); text-shadow: 1px 1px rgba(197, 223, 248,0.8),2px 2px rgba(197, 223, 248,0.8),3px 3px rgba(197, 223, 248,0.8),4px 4px rgba(197, 223, 248,0.8),5px 5px rgba(197, 223, 248,0.8),6px 6px rgba(197, 223, 248,0.8); } .example7{ color: #eee; -webkit-text-shadow: 5px 5px 0 #666, 7px 7px 0 #eee; -moz-text-shadow: 5px 5px 0 #666, 7px 7px 0 #eee; -ms-text-shadow: 5px 5px 0 #666, 7px 7px 0 #eee; -o-text-shadow: 5px 5px 0 #666, 7px 7px 0 #eee; text-shadow: 5px 5px 0 #666, 7px 7px 0 #eee; } .example8{ color: rgba(255,179,140,0.5); -webkit-text-shadow: 3px 3px 0 rgba(180,255,0,0.5); -moz-text-shadow: 3px 3px 0 rgba(180,255,0,0.5); -ms-text-shadow: 3px 3px 0 rgba(180,255,0,0.5); -o-text-shadow: 3px 3px 0 rgba(180,255,0,0.5); text-shadow: 3px 3px 0 rgba(180,255,0,0.5); } </style> </head> <body> <div class="example example1">text-shadow</div> <div class="example example2">text-shadow</div> <div class="example example3">text-shadow</div> <div class="example example4">text-shadow</div> <div class="example example5">text-shadow</div> <div class="example example6">text-shadow</div> <div class="example example7">text-shadow</div> <div class="example example8">text-shadow</div> </body> </html>
![](http://images.cnitblog.com/i/572575/201405/101053567133047.png)
查看更多:/article/1214994.html
相关文章推荐
- css3新功能之(text-shadow实现)CSS3文字阴影效果
- CSS3 参考指南:文字阴影text-shadow
- CSS3的文字阴影—text-shadow
- 利用css3的text-shadow属性实现文字阴影乳白效果
- CSS3的文字阴影—text-shadow
- CSS3的文字阴影—text-shadow
- CSS3的文字阴影—text-shadow
- CSS3的文字阴影—text-shadow
- CSS3文字与字体:text-overflow 与 word-wrap、@font-face、文本阴影text-shadow
- IE下实现类似CSS3 text-shadow文字阴影的几种方法
- CSS3的文字阴影—text-shadow
- 了解CSS3的文字阴影效果 - Text Shadow effects
- CSS3之阴影-文字阴影text-shadow
- 浅谈CSS3新特性——文字阴影text-shadow、阴影box-shadow和倒影box-reflect
- 了解CSS3的文字阴影效果 - Text Shadow effects
- CSS3的文字阴影—text-shadow
- IE下实现类似CSS3 text-shadow文字阴影的几种方法
- 了解CSS3的文字阴影效果 - Text Shadow effects
- CSS3的文字阴影―text-shadow的使用方法
- CSS3的文字阴影—text-shadow