首先是多重阴影
.shadow3 { text-shadow: 1px 1px 1px #666, 3px 3px 8px black; }效果如下
然后是3d效果的实现
.shadow9 { text-shadow: 0 1px #808d93, -1px 0 #cdd2d5, -1px 2px #808d93, -2px 1px #cdd2d5, -2px 3px #808d93, -3px 2px #cdd2d5, -3px 4px #808d93, -4px 3px #cdd2d5, -4px 5px #808d93, -5px 4px #cdd2d5, -5px 6px #808d93, -6px 5px #cdd2d5, -6px 7px #808d93, -7px 6px #cdd2d5, -7px 8px #808d93, -8px 7px #cdd2d5; }效果如下
火焰特效
.shadow7 { text-shadow: 0 0 20px #fefcc9, 10px -10px 30px #feec85, -20px -20px 40px #ffae34, 20px -30px 35px #ec760c, -20px -40px 40px #cd4606, 0 -50px 65px #973716, 10px -70px 70px #451b0e; }效果如下
动画效果
.shadow10 { color: yellow; text-shadow: 1px 1px 2px rgba(0,0,0,0.7), 5px 5px 1px orange, 6px 6px 2px rgba(0,0,0,0.7), 10px 10px 1px red, 11px 11px 2px rgba(0,0,0,0.7), 15px 15px 1px purple, 16px 16px 2px rgba(0,0,0,0.7); -webkit-animation: text-snake 1s infinite alternate; -moz-animation: text-snake 1s infinite alternate; -ms-animation: text-snake 1s infinite alternate; animation: text-snake 1s infinite alternate; } /* other prefixed animation blocks ommitted for brevity */ @keyframes text-snake { from { text-shadow: 1px 1px 2px rgba(0,0,0,0.7), 5px 5px 1px orange, 6px 6px 2px rgba(0,0,0,0.7), 10px 10px 1px red, 11px 11px 2px rgba(0,0,0,0.7), 15px 15px 1px purple, 16px 16px 2px rgba(0,0,0,0.7); } to { text-shadow: -1px 1px 2px rgba(0,0,0,0.7), -5px 5px 1px orange, -6px 6px 2px rgba(0,0,0,0.7), -10px 10px 1px red, -11px 11px 2px rgba(0,0,0,0.7), -15px 15px 1px purple, -16px 16px 2px rgba(0,0,0,0.7); } }效果如下
y以上效果的颜色与阴影效果只需要改变shadow属性的值就可以的，我这里配色有点奇怪，搭配更好看的颜色可以使shadow属性更加美观。