作者：Sara Cope
1 p { 2 text-shadow: 1px 1px 1px #000; 3 }
你可以通过逗号“,”应用多个文本阴影。
1 p { 2 text-shadow: 1px 1px 1px #000, 3 3px 3px 5px blue; 4 }
前两个值指定了阴影偏移的长度。第一个值指定了阴影的水平距离，第二个值指定了阴影的垂直距离。第三个值指定了模糊半径（blur radius），最后一个值描述阴影的颜色：
1.value=X坐标
2.value=Y坐标
3.value=模糊半径
4.value=阴影颜色
前两个值使用正数，阴影会在文本右下侧，第一个值指定水平向右距离，第二个值指定垂直向下距离。
第三个值模糊半径是一个可选值，它可以指定，但不是必须的。它是文本被拉伸的像素的数量，而拉伸会造成一个模糊效果。如果你不使用第三个值，则视为指定模糊半径为0。
另外，记住你可以使用RGBa或HSLa值作为颜色，例如40%透明度的白色。
1 p { 2 text-shadow: 0px 2px 2px rgba(255, 255, 255, 0.4); 3 }
通过对text-shadow的设计，字体可以表现出类PPT中艺术字的效果。
1 .monkey-example { 2 text-align: center; 3 font: bold 80px Sans-Serif; 4 padding: 40px 0; 5 }
monkey-example为所有下面案例的公有class。
1 .simple { 2 background: #91877b; 3 text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4); 4 }
CSS样式：
1 .otto { 2 background: #0e8dbc; 3 color: white; 4 text-shadow: 0 1px 0 #ccc, 5 0 2px 0 #c9c9c9, 6 0 3px 0 #bbb, 7 0 4px 0 #b9b9b9, 8 0 5px 0 #aaa, 9 0 6px 1px rgba(0, 0, 0, .1), 10 0 0 5px rgba(0, 0, 0, .1), 11 0 1px 3px rgba(0, 0, 0, .3), 12 0 3px 5px rgba(0, 0, 0, .2), 13 0 5px 10px rgba(0, 0, 0, .25), 14 0 10px 10px rgba(0, 0, 0, .2), 15 0 20px 20px rgba(0, 0, 0, .15); 16 }
1 .relief { 2 background-color: #3a50d9; 3 color: #e0eff2; 4 font: italic bold 100px Georgia, Serif; 5 text-shadow: -4px 3px 0 #3a50d9, -14px 7px 0 #0a0e27; 6 }
CSS样式：
1 .close { 2 background-color: #fff; 3 color: #202c2d; 4 text-shadow: 5 0 1px #808d93, 6 -1px 0 #cdd2d5, 7 -1px 2px #808d93, 8 -2px 1px #cdd2d5, 9 -2px 3px #808d93, 10 -3px 2px #cdd2d5, 11 -3px 4px #808d93, 12 -4px 3px #cdd2d5, 13 -4px 5px #808d93, 14 -5px 4px #cdd2d5, 15 -5px 6px #808d93, 16 -6px 5px #cdd2d5, 17 -6px 7px #808d93, 18 -7px 6px #cdd2d5, 19 -7px 8px #808d93, 20 -8px 7px #cdd2d5; 21 }
CSS样式：
1 .printers { 2 background-color: #edde9c; 3 color: #bc2e1e; 4 text-shadow: 5 0 1px 0px #378ab4, 6 1px 0 0px #5dabcd, 7 1px 2px 1px #378ab4, 8 2px 1px 1px #5dabcd, 9 2px 3px 2px #378ab4, 10 3px 2px 2px #5dabcd, 11 3px 4px 2px #378ab4, 12 4px 3px 3px #5dabcd, 13 4px 5px 3px #378ab4, 14 5px 4px 2px #5dabcd, 15 5px 6px 2px #378ab4, 16 6px 5px 2px #5dabcd, 17 6px 7px 1px #378ab4, 18 7px 6px 1px #5dabcd, 19 7px 8px 0px #378ab4, 20 8px 7px 0px #5dabcd; 21 }
CSS样式：
1 .glow { 2 color: #444; 3 text-shadow: 4 1px 0px 1px #ccc, 0px 1px 1px #eee, 5 2px 1px 1px #ccc, 1px 2px 1px #eee, 6 3px 2px 1px #ccc, 2px 3px 1px #eee, 7 4px 3px 1px #ccc, 3px 4px 1px #eee, 8 5px 4px 1px #ccc, 4px 5px 1px #eee, 9 6px 5px 1px #ccc, 5px 6px 1px #eee, 10 7px 6px 1px #ccc; 11 }
CSS样式：
1 .vamp { 2 color: #92a5de; 3 background: red; 4 text-shadow: 0px 0px 0 rgb(137, 156, 213), 5 1px 1px 0 rgb(129, 148, 205), 6 2px 2px 0 rgb(120, 139, 196), 7 3px 3px 0 rgb(111, 130, 187), 8 4px 4px 0 rgb(103, 122, 179), 9 5px 5px 0 rgb(94, 113, 170), 10 6px 6px 0 rgb(85, 104, 161), 11 7px 7px 0 rgb(76, 95, 152), 12 8px 8px 0 rgb(68, 87, 144), 13 9px 9px 0 rgb(59, 78, 135), 14 10px 10px 0 rgb(50, 69, 126), 15 11px 11px 0 rgb(42, 61, 118), 16 12px 12px 0 rgb(33, 52, 109), 17 13px 13px 0 rgb(24, 43, 100), 18 14px 14px 0 rgb(15, 34, 91), 19 15px 15px 0 rgb(7, 26, 83), 20 16px 16px 0 rgb(-2, 17, 74), 21 17px 17px 0 rgb(-11, 8, 65), 22 18px 18px 0 rgb(-19, 0, 57), 23 19px 19px 0 rgb(-28, -9, 48), 24 20px 20px 0 rgb(-37, -18, 39), 25 21px 21px 20px rgba(0, 0, 0, 1), 26 21px 21px 1px rgba(0, 0, 0, 0.5), 27 0px 0px 20px rgba(0, 0, 0, .2); 28 }
原文：https://www.cnblogs.com/f6056/p/10924333.html