css3のtext-shadow
text-shadow，让我们大家一起来学习一下吧。
语法：
text-shadow：none | <shadow> [ , <shadow> ]*
<shadow> = <length>{2,3} && <color>?
默认值：none;
适用于：所有元素
继承性：有
取值：
none：无阴影
<length>①：第1个长度值用来设置对象的阴影水平偏移值。可以为负值
<length>②：第2个长度值用来设置对象的阴影垂直偏移值。可以为负值
<length>③：如果提供了第3个长度值则用来设置对象的阴影模糊值。不允许负值
<color>：设置对象的阴影的颜色，可以是rgba透明色。
说明：
可以设定多组效果，每组参数以逗号分隔。
兼容性：
示例：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>无标题文档</title> 6 <style> 7 * { 8 margin: 0; 9 padding: 0; 10 } 11 body { 12 font-family: Verdana, Geneva, Sans-serif; 13 } 14 div { 15 margin-bottom: 10px; 16 } 17 /*基本阴影*/ 18 .exg_1 { 19 font-size:5em; 20 text-shadow: 2px 4px 3px rgba(0,0,0,0.3); 21 color:#FFF; 22 text-align:center; 23 background: #0ff; 24 } 25 /*深陷凸显*/ 26 .exg_2 { 27 font-size: 5em; 28 color: rgba(0,0,0,0.6); 29 text-shadow: 2px 2px 3px rgba(255,255,255,0.1); 30 text-align:center; 31 background: #222; 32 } 33 /*硬边的阴影*/ 34 .exg_3 { 35 font-size: 5em; 36 color: #fff; 37 text-shadow:6px 6px 0px rgba(0,0,0,0.2); 38 text-align: center; 39 background: #fff3cd; 40 41 } 42 /*双层阴影*/ 43 .exg_4 { 44 font-size: 5em; 45 color: #000; 46 text-shadow:4px 3px 0px #fff, 9px 8px 0px rgba(0,0,0,0.15); 47 text-align: center; 48 } 49 /*有一定距离的阴影*/ 50 .exg_5 { 51 font-size: 5em; 52 color: #fff; 53 text-shadow:0px 3px 0px #b2a98f, 54 0px 14px 10px rgba(0,0,0,0.15), 55 0px 24px 2px rgba(0,0,0,0.1), 56 0px 34px 30px rgba(0,0,0,0.1); 57 text-align: center; 58 background: #fff3cd; 59 } 60 /*密切结合并有阴影*/ 61 .exg_6 { 62 font-size: 5em; 63 color: #fff; 64 text-shadow:0px 4px 3px rgba(0,0,0,0.4), 65 0px 8px 13px rgba(0,0,0,0.1), 66 0px 18px 23px rgba(0,0,0,0.1); 67 text-align: center; 68 background: #6bf9fb; 69 } 70 /*立体3D文字*/ 71 .exg_7 { 72 font-size: 5em; 73 color: #fff; 74 text-shadow:0 1px 0 #ccc, 75 0 2px 0 #c9c9c9, 76 0 3px 0 #bbb, 77 0 4px 0 #b9b9b9; 78 text-align: center; 79 background: #3594c0; 80 } 81 /*嵌入式文字（仅支持谷歌）*/ 82 .exg_8 { 83 font-size: 5em; 84 color: #fff; 85 background: #dbdbdb; 86 } 87 .exg_8 h1 { 88 background: #666; 89 -webkit-background-clip:text; 90 -moz-background-clip:text; 91 background-clip: text; 92 color: transparent; 93 text-shadow: rgba(255,255,255,0.1) 0px 3px 3px; 94 text-align: center; 95 } 96 /*四周发光的文字*/ 97 .exg_9 { 98 background: #992d23; 99 font-size: 5em; 100 color: #fff; 101 text-shadow:0px 0px 9px rgba(255,255,255,0.7); 102 text-align: center; 103 } 104 /*层叠文字*/ 105 .exg_10 { 106 background: #6bf9fb; 107 font-size: 5em; 108 color: #fff; 109 text-shadow: -10px 10px 0px #00e6e6, 110 -20px 20px 0px #01cccc, 111 -30px 30px 0px #00bdbd; 112 text-align: center; 113 padding-bottom: 0.5em; 114 } 115 /*多处光源投射*/ 116 .exg_11 { 117 font-size: 5em; 118 color: #fff; 119 text-shadow: 0px 15px 5px rgba(0,0,0,0.1), 120 10px 20px 5px rgba(0,0,0,0.05), 121 -10px 20px 5px rgba(0,0,0,0.05); 122 text-align: center; 123 background: #6bf9fb; 124 padding-bottom: 0.2em; 125 } 126 /*浮雕效果*/ 127 .exg_12 { 128 font-size: 5em; 129 color: rgba(0,0,0,0.6); 130 text-shadow:2px 8px 6px rgba(0,0,0,0.2), 131 0px -5px 35px rgba(255,255,255,0.3); 132 text-align: center; 133 background: #609350; 134 } 135 136 </style> 137 </head> 138 139 <body> 140 <div class="exg_1"> 141 <h1>marker</h1> 142 </div> 143 <div class="exg_2"> 144 <h1>marker</h1> 145 </div> 146 <div class="exg_3"> 147 <h1>marker</h1> 148 </div> 149 <div class="exg_4"> 150 <h1>marker</h1> 151 </div> 152 <div class="exg_5"> 153 <h1>marker</h1> 154 </div> 155 <div class="exg_6"> 156 <h1>marker</h1> 157 </div> 158 <div class="exg_7"> 159 <h1>marker</h1> 160 </div> 161 <div class="exg_8"> 162 <h1>marker</h1> 163 </div> 164 <div class="exg_9"> 165 <h1>marker</h1> 166 </div> 167 <div class="exg_10"> 168 <h1>marker</h1> 169 </div> 170 <div class="exg_11"> 171 <h1>marker</h1> 172 </div> 173 <div class="exg_12"> 174 <h1>marker</h1> 175 </div> 176 177 </html>
效果图如下：
