文字阴影-CSS Text-Shadow
生活随笔
收集整理的這篇文章主要介紹了
文字阴影-CSS Text-Shadow
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
??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<title>文字陰影-CSS?Text-Shadow?in?Safari,?Opera,?Firefox?and?other?Web?Browsers</title>
??5<meta?http-equiv="Content-Type"?content="text/html;?charset=gb2312">
??6<meta?name="description"?content="涂聚文,捷為工作室,經(jīng)營信息流,物流,人力資源流,資本流的系統(tǒng)解決方案的開發(fā)與設(shè)計和服務(wù),geoVI?studio.Geovin Du.?Systems?Solution?to?Fund?flow,and?Information?flow,and?Material?flow,and?Control?flow,and?Human?Resource.Applied?software?development,design?and?service。.">
??7<meta?name="Robots"?content="all?index?follow?">
??8<meta?name="Author"?content="涂聚文"?/>
??9<link?rel="shortcut?icon"?href="favicon.ico"?type="image/x-icon"?/>
?10<link?rel="icon"?href="favicon.ico"?type="image/ico"?/>
?11<link?rel="Bookmark"?href="favicon.ico">?
?12<style?type="text/css">
?13/*????*??要素本身
?14????*?圍繞要素的空格填充（padding）
?15????*?圍繞空格填充的邊框（border）
?16????*?圍繞邊框的邊距（空白－margin）
?17*/
?18body{
?19????font-family:Georgia,serif;
?20????margin:1em?auto;
?21????max-width:60em;
?22????padding:0?1em;
?23}
?24h1,h2{
?25????text-shadow:?2px?3px?4px?#CCC;
?26}
?27.example{
?28????border:?1px?dotted?#666;
?29????margin:?0.5em?2em?1em;
?30????padding:?0.3em;
?31}
?32code{
?33????color:#666;
?34}
?35div?code{
?36????display:block;
?37????margin:0?0?0.4em?0;
?38}
?39.example?p{
?40????font-size:?150%;
?41????font-weight:?bold;
?42????margin:?0;
?43????padding:?10px?15px;
?44}
?45address{
?46????font-style:normal;
?47????text-align:right;
?48}
?49</style>
?50<script?type="text/javascript">
?51
?52var?handle?=?false;
?53var?textBrightness?=?50;
?54var?fireCount?=?6;
?55var?fireDelta?=?new?Array();
?56var?step?=?0;
?57var?angle?=?0;
?58var?radius?=?6;
?59
?60function?animate()
?61{
?62????fireDelta[fireCount?-?step]?=?Math.random()?*?2?-?1;
?63????var?e?=?document.getElementById("fire");
?64????var?s?=?"";
?65????for?(var?i?=?fireCount;?i--;?)
?66????{
?67????????if?(s)?s? =?",?";
?68????????s? =?Math.round(fireDelta[(i? ?fireCount?-?step)?%?fireCount]?*?i)? ?"px?"? ?(-2?*?i?-1)? ?"px?"? ?(2? ?i)? ?"px?";
?69????????s? =?"rgb(255,?"? ?(255?-?i?*?Math.floor(255?/?(fireCount?-?1)))? ?",?0)";
?70????}
?71????e.style.textShadow?=?s;
?72????/*?We?need?to?change?something,?else?the?shadow?will?not?be?re-rendered.?*/
?73????e.style.color?=?"rgb("?
?74????????(textBrightness? ?step?%?2)? ?",?"?
?75????????textBrightness? ?",?"?
?76????????textBrightness? ?")";
?77????step?=?(step? ?1)?%?fireCount;
?78
?79????/*?RGB?*/
?80????angle?-=?0.4;
?81????if?(angle?<=?0)?angle?=?Math.PI?*?2;
?82????var?e?=?document.getElementById("rgb");
?83????var?s?=
?84????????Math.round(Math.sin(angle)?*?radius)? ?"px?"?
?85????????Math.round(Math.cos(angle)?*?radius)? ?"px?4px?#0F0,?"?
?86????????Math.round(Math.sin(angle? ?Math.PI?*?4?/?3)?*?radius)? ?"px?"?
?87????????Math.round(Math.cos(angle? ?Math.PI?*?4?/?3)?*?radius)? ?"px?4px?#F00,?"?
?88????????Math.round(Math.sin(angle? ?Math.PI?*?2?/?3)?*?radius)? ?"px?"?
?89????????Math.round(Math.cos(angle? ?Math.PI?*?2?/?3)?*?radius)? ?"px?4px?#33F";
?90????e.style.textShadow?=?s;
?91????/*?We?need?to?change?something,?else?the?shadow?will?not?be?re-rendered.?*/
?92????e.style.color?=?"rgb("? ?(255?-?step?%?2)? ?",?255,?255)";
?93}
?94
?95function?toggleAnimation()
?96{
?97????for?(var?i?=?0;?i?<?fireCount;?i )
?98????????fireDelta[i]?=?Math.random()?*?2?-?1;
?99????if?(handle)
100????{
101????????window.clearInterval(handle);
102????????handle?=?false;
103????}
104????else
105????????handle?=?window.setInterval(function()?{?animate();?},?100);
106????return?false;
107}
108
109</script>
110</head>
111<body?onload="toggleAnimation()">
112
113<h1>CSS?Text-Shadow?in?Safari,?Opera,?Firefox?and?more</h1>
114
115<p>The?CSS 2?property?<code>text-shadow</code>?is?supported?in
116Safari?since?version?3?(also?available?for?Windows),?Opera?since?9.5,?Firefox?since?3.1,?Konqueror?and?iCab.
117Future?versions?of?Google?Chrome?should?also?support?<code>text-shadow</code>?because?Chrome?is?based?on?WebKit,
118the?rendering?engine?behind?Safari.?Internet?Explorer?8?does?not?support?such?text?shadows
119(except?for?some?DirectX?image?transform?filters).</p>
120
121<h2>Animated?multiple?Shadows?(requires?JavaScript)</h2>
122
123<p><a?href="#"?onclick="return?toggleAnimation()">Start/stop?animations</a>.
124Safari?supports?one?shadow?only.?Only?the?first?shadow?is?displayed.</p>
125
126<div?class="example">
127<code>element.style.textShadow?=?"…";</code>
128<p?id="rgb"?style="background:?#000;?color:?#FFF;">
129Text?shadows?were?defined?in?1997?and?became?applicable?in?2009
130</p>
131</div>
132
133<div?class="example">
134<code>element.style.textShadow?=?"…";</code>
135<p?id="fire"?style="background:?#000;?color:?#666;">
136Text?shadows?were?defined?in?1997?and?became?applicable?in?2009
137</p>
138</div>
139
140<h2>Multiple?Shadows?(max.?6)</h2>
141
142<p>Opera?supports?at?most?six?shadows.
143Safari?supports?one?shadow?only.?Only?the?first?shadow?is?displayed.</p>
144
145<div?class="example">
146<code>text-shadow:?-1px?-1px?#666,?1px?1px?#FFF;</code>
147
148<p?style="background:?#CCC;?color:?#CCC;?text-shadow:?-1px?-1px?#666,?1px?1px?#FFF;">
149Text?shadows?were?defined?in?1997?and?became?applicable?in?2009
150</p>
151</div>
152
153<div?class="example">
154<code>text-shadow:?1px?1px?3px?#666,?-1px?-1px?3px?#FFF,?1px?1px?#666,?-1px?-1px?#FFF;</code>
155<p?style="background:?#999;?color:?#999;?text-shadow:?1px?1px?3px?#666,?-1px?-1px?3px?#FFF,?1px?1px?#666,?-1px?-1px?#FFF;">
156Text?shadows?were?defined?in?1997?and?became?applicable?in?2009
157</p>
158</div>
159
160<div?class="example">
161<code>text-shadow:?0?-1px?#000,?1px?0?#000,?0?1px?#000,?-1px?0?#000;</code>
162<p?style="background:?#DDD;?color:?#EEE;?text-shadow:?0?-1px?#000,?1px?0?#000,?0?1px?#000,?-1px?0?#000;">
163
164Text?shadows?were?defined?in?1997?and?became?applicable?in?2009
165</p>
166</div>
167
168<div?class="example">
169<code>text-shadow:?1px?0?#F33,?-1px?0?#33F;</code>
170<p?style="background:?#FFF;?color:?#000;?text-shadow:?1px?0?#F33,?-1px?0?#33F;">
171Text?shadows?were?defined?in?1997?and?became?applicable?in?2009
172</p>
173</div>
174
175<div?class="example">
176<code>text-shadow:?2px?0?4px?#600,?-2px?0?4px?#006;</code>
177<p?style="background:?#FFF;?color:?#000;?text-shadow:?2px?0?4px?#600,?-2px?0?4px?#006;">
178Text?shadows?were?defined?in?1997?and?became?applicable?in?2009
179
180</p>
181</div>
182
183<div?class="example">
184<code>text-shadow:?3px?-5px?4px?#0F0,?-3px?-5px?4px?#F00,?0?6px?4px?#33F;</code>
185<p?style="background:?#000;?color:?#FFF;?text-shadow:?3px?-5px?4px?#0F0,?-3px?-5px?4px?#F00,?0?6px?4px?#33F;">
186Text?shadows?were?defined?in?1997?and?became?applicable?in?2009
187</p>
188</div>
189
190<div?class="example">
191<code>text-shadow:?0?0?24px?#C00,?0?0?4px?#C00,?1px?1px?2px?#333;</code>
192<p?style="background:?#FFF;?color:?#FFF;?text-shadow:?0?0?24px?#C00,?0?0?4px?#C00,?1px?1px?2px?#333;">
193Text?shadows?were?defined?in?1997?and?became?applicable?in?2009
194</p>
195
196</div>
197
198<h2>Classical?Shadows</h2>
199
200<div?class="example">
201<code>text-shadow:?1px?1px?2px?#999;</code>
202<p?style="background:?#FFF;?color:?#000;?text-shadow:?1px?1px?2px?#999;">
203Text?shadows?were?defined?in?1997?and?became?applicable?in?2009
204</p>
205</div>
206
207<div?class="example">
208<code>text-shadow:?2px?2px?3px?#999;</code>
209<p?style="background:?#FFF;?color:?#069;?text-shadow:?2px?2px?3px?#999;">
210
211Text?shadows?were?defined?in?1997?and?became?applicable?in?2009
212</p>
213</div>
214
215<div?class="example">
216<code>text-shadow:?0?0?8px?#000;</code>
217<p?style="background:?#369;?color:?#FC0;?text-shadow:?0?0?8px?#000;">
218Text?shadows?were?defined?in?1997?and?became?applicable?in?2009
219</p>
220</div>
221
222<h2>Glowing?Borders</h2>
223
224<div?class="example">
225<code>text-shadow:?0?0?11px?#0F0;</code>
226
227<p?style="background:?#000;?color:?#0F0;?text-shadow:?0?0?11px?#0F0;">
228Text?shadows?were?defined?in?1997?and?became?applicable?in?2009
229</p>
230</div>
231
232<div?class="example">
233<code>text-shadow:?0?0?5px?#FF0;</code>
234<p?style="background:?#000;?color:?#FFF;?text-shadow:?0?0?5px?#FF0;">
235Text?shadows?were?defined?in?1997?and?became?applicable?in?2009
236</p>
237</div>
238
239<div?class="example">
240<code>text-shadow:?0?0?3px?#F90;</code>
241<p?style="background:?#FFF;?color:?#000;?text-shadow:?0?0?3px?#F90;">
242
243Text?shadows?were?defined?in?1997?and?became?applicable?in?2009
244</p>
245</div>
246
247<h2>Unusual?Effects</h2>
248
249<div?class="example">
250<code>text-shadow:?0?7px?11px?#390;</code>
251<p?style="background:?#FFF;?color:?#000;?text-shadow:?0?7px?11px?#390;">
252Text?shadows?were?defined?in?1997?and?became?applicable?in?2009
253</p>
254</div>
255
256<div?class="example">
257<code>text-shadow:?0px?-15px?0?#F00;</code>
258
259<p?style="background:?#FFF;?color:?#000;?text-shadow:?0px?-15px?0?#F00;">
260Text?shadows?were?defined?in?1997?and?became?applicable?in?2009
261</p>
262</div>
263
264<div?class="example">
265<code>text-shadow:?0?0?11px?#FF6;</code>
266<p?style="background:?#000;?color:?#000;?text-shadow:?0?0?11px?#FF6;">
267Text?shadows?were?defined?in?1997?and?became?applicable?in?2009
268</p>
269</div>
270
271<div?class="example">
272<code>text-shadow:?0?0?8px?#000;</code>
273<p?style="background:?#FFF;?color:?#CCC;?text-shadow:?0?0?8px?#000;">
274
275Text?shadows?were?defined?in?1997?and?became?applicable?in?2009
276</p>
277</div>
278
279<address>©?<a?href="http://dupcit.com/">Geovin?Du</a>,
280created?in?<a?href="http://dupcit.com/1188980640">September?2009</a><br>
281</address>
282
283</body>
284</html>
更多專業(yè)前端知識，請上 【猿2048】www.mk2048.com 創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎勵來咯，堅持創(chuàng)作打卡瓜分現(xiàn)金大獎
??2<html?xmlns="http://www.w3.org/1999/xhtml">
??3<head>
??4<title>文字陰影-CSS?Text-Shadow?in?Safari,?Opera,?Firefox?and?other?Web?Browsers</title>
??5<meta?http-equiv="Content-Type"?content="text/html;?charset=gb2312">
??6<meta?name="description"?content="涂聚文,捷為工作室,經(jīng)營信息流,物流,人力資源流,資本流的系統(tǒng)解決方案的開發(fā)與設(shè)計和服務(wù),geoVI?studio.Geovin Du.?Systems?Solution?to?Fund?flow,and?Information?flow,and?Material?flow,and?Control?flow,and?Human?Resource.Applied?software?development,design?and?service。.">
??7<meta?name="Robots"?content="all?index?follow?">
??8<meta?name="Author"?content="涂聚文"?/>
??9<link?rel="shortcut?icon"?href="favicon.ico"?type="image/x-icon"?/>
?10<link?rel="icon"?href="favicon.ico"?type="image/ico"?/>
?11<link?rel="Bookmark"?href="favicon.ico">?
?12<style?type="text/css">
?13/*????*??要素本身
?14????*?圍繞要素的空格填充（padding）
?15????*?圍繞空格填充的邊框（border）
?16????*?圍繞邊框的邊距（空白－margin）
?17*/
?18body{
?19????font-family:Georgia,serif;
?20????margin:1em?auto;
?21????max-width:60em;
?22????padding:0?1em;
?23}
?24h1,h2{
?25????text-shadow:?2px?3px?4px?#CCC;
?26}
?27.example{
?28????border:?1px?dotted?#666;
?29????margin:?0.5em?2em?1em;
?30????padding:?0.3em;
?31}
?32code{
?33????color:#666;
?34}
?35div?code{
?36????display:block;
?37????margin:0?0?0.4em?0;
?38}
?39.example?p{
?40????font-size:?150%;
?41????font-weight:?bold;
?42????margin:?0;
?43????padding:?10px?15px;
?44}
?45address{
?46????font-style:normal;
?47????text-align:right;
?48}
?49</style>
?50<script?type="text/javascript">
?51
?52var?handle?=?false;
?53var?textBrightness?=?50;
?54var?fireCount?=?6;
?55var?fireDelta?=?new?Array();
?56var?step?=?0;
?57var?angle?=?0;
?58var?radius?=?6;
?59
?60function?animate()
?61{
?62????fireDelta[fireCount?-?step]?=?Math.random()?*?2?-?1;
?63????var?e?=?document.getElementById("fire");
?64????var?s?=?"";
?65????for?(var?i?=?fireCount;?i--;?)
?66????{
?67????????if?(s)?s? =?",?";
?68????????s? =?Math.round(fireDelta[(i? ?fireCount?-?step)?%?fireCount]?*?i)? ?"px?"? ?(-2?*?i?-1)? ?"px?"? ?(2? ?i)? ?"px?";
?69????????s? =?"rgb(255,?"? ?(255?-?i?*?Math.floor(255?/?(fireCount?-?1)))? ?",?0)";
?70????}
?71????e.style.textShadow?=?s;
?72????/*?We?need?to?change?something,?else?the?shadow?will?not?be?re-rendered.?*/
?73????e.style.color?=?"rgb("?
?74????????(textBrightness? ?step?%?2)? ?",?"?
?75????????textBrightness? ?",?"?
?76????????textBrightness? ?")";
?77????step?=?(step? ?1)?%?fireCount;
?78
?79????/*?RGB?*/
?80????angle?-=?0.4;
?81????if?(angle?<=?0)?angle?=?Math.PI?*?2;
?82????var?e?=?document.getElementById("rgb");
?83????var?s?=
?84????????Math.round(Math.sin(angle)?*?radius)? ?"px?"?
?85????????Math.round(Math.cos(angle)?*?radius)? ?"px?4px?#0F0,?"?
?86????????Math.round(Math.sin(angle? ?Math.PI?*?4?/?3)?*?radius)? ?"px?"?
?87????????Math.round(Math.cos(angle? ?Math.PI?*?4?/?3)?*?radius)? ?"px?4px?#F00,?"?
?88????????Math.round(Math.sin(angle? ?Math.PI?*?2?/?3)?*?radius)? ?"px?"?
?89????????Math.round(Math.cos(angle? ?Math.PI?*?2?/?3)?*?radius)? ?"px?4px?#33F";
?90????e.style.textShadow?=?s;
?91????/*?We?need?to?change?something,?else?the?shadow?will?not?be?re-rendered.?*/
?92????e.style.color?=?"rgb("? ?(255?-?step?%?2)? ?",?255,?255)";
?93}
?94
?95function?toggleAnimation()
?96{
?97????for?(var?i?=?0;?i?<?fireCount;?i )
?98????????fireDelta[i]?=?Math.random()?*?2?-?1;
?99????if?(handle)
100????{
101????????window.clearInterval(handle);
102????????handle?=?false;
103????}
104????else
105????????handle?=?window.setInterval(function()?{?animate();?},?100);
106????return?false;
107}
108
109</script>
110</head>
111<body?onload="toggleAnimation()">
112
113<h1>CSS?Text-Shadow?in?Safari,?Opera,?Firefox?and?more</h1>
114
115<p>The?CSS 2?property?<code>text-shadow</code>?is?supported?in
116Safari?since?version?3?(also?available?for?Windows),?Opera?since?9.5,?Firefox?since?3.1,?Konqueror?and?iCab.
117Future?versions?of?Google?Chrome?should?also?support?<code>text-shadow</code>?because?Chrome?is?based?on?WebKit,
118the?rendering?engine?behind?Safari.?Internet?Explorer?8?does?not?support?such?text?shadows
119(except?for?some?DirectX?image?transform?filters).</p>
120
121<h2>Animated?multiple?Shadows?(requires?JavaScript)</h2>
122
123<p><a?href="#"?onclick="return?toggleAnimation()">Start/stop?animations</a>.
124Safari?supports?one?shadow?only.?Only?the?first?shadow?is?displayed.</p>
125
126<div?class="example">
127<code>element.style.textShadow?=?"…";</code>
128<p?id="rgb"?style="background:?#000;?color:?#FFF;">
129Text?shadows?were?defined?in?1997?and?became?applicable?in?2009
130</p>
131</div>
132
133<div?class="example">
134<code>element.style.textShadow?=?"…";</code>
135<p?id="fire"?style="background:?#000;?color:?#666;">
136Text?shadows?were?defined?in?1997?and?became?applicable?in?2009
137</p>
138</div>
139
140<h2>Multiple?Shadows?(max.?6)</h2>
141
142<p>Opera?supports?at?most?six?shadows.
143Safari?supports?one?shadow?only.?Only?the?first?shadow?is?displayed.</p>
144
145<div?class="example">
146<code>text-shadow:?-1px?-1px?#666,?1px?1px?#FFF;</code>
147
148<p?style="background:?#CCC;?color:?#CCC;?text-shadow:?-1px?-1px?#666,?1px?1px?#FFF;">
149Text?shadows?were?defined?in?1997?and?became?applicable?in?2009
150</p>
151</div>
152
153<div?class="example">
154<code>text-shadow:?1px?1px?3px?#666,?-1px?-1px?3px?#FFF,?1px?1px?#666,?-1px?-1px?#FFF;</code>
155<p?style="background:?#999;?color:?#999;?text-shadow:?1px?1px?3px?#666,?-1px?-1px?3px?#FFF,?1px?1px?#666,?-1px?-1px?#FFF;">
156Text?shadows?were?defined?in?1997?and?became?applicable?in?2009
157</p>
158</div>
159
160<div?class="example">
161<code>text-shadow:?0?-1px?#000,?1px?0?#000,?0?1px?#000,?-1px?0?#000;</code>
162<p?style="background:?#DDD;?color:?#EEE;?text-shadow:?0?-1px?#000,?1px?0?#000,?0?1px?#000,?-1px?0?#000;">
163
164Text?shadows?were?defined?in?1997?and?became?applicable?in?2009
165</p>
166</div>
167
168<div?class="example">
169<code>text-shadow:?1px?0?#F33,?-1px?0?#33F;</code>
170<p?style="background:?#FFF;?color:?#000;?text-shadow:?1px?0?#F33,?-1px?0?#33F;">
171Text?shadows?were?defined?in?1997?and?became?applicable?in?2009
172</p>
173</div>
174
175<div?class="example">
176<code>text-shadow:?2px?0?4px?#600,?-2px?0?4px?#006;</code>
177<p?style="background:?#FFF;?color:?#000;?text-shadow:?2px?0?4px?#600,?-2px?0?4px?#006;">
178Text?shadows?were?defined?in?1997?and?became?applicable?in?2009
179
180</p>
181</div>
182
183<div?class="example">
184<code>text-shadow:?3px?-5px?4px?#0F0,?-3px?-5px?4px?#F00,?0?6px?4px?#33F;</code>
185<p?style="background:?#000;?color:?#FFF;?text-shadow:?3px?-5px?4px?#0F0,?-3px?-5px?4px?#F00,?0?6px?4px?#33F;">
186Text?shadows?were?defined?in?1997?and?became?applicable?in?2009
187</p>
188</div>
189
190<div?class="example">
191<code>text-shadow:?0?0?24px?#C00,?0?0?4px?#C00,?1px?1px?2px?#333;</code>
192<p?style="background:?#FFF;?color:?#FFF;?text-shadow:?0?0?24px?#C00,?0?0?4px?#C00,?1px?1px?2px?#333;">
193Text?shadows?were?defined?in?1997?and?became?applicable?in?2009
194</p>
195
196</div>
197
198<h2>Classical?Shadows</h2>
199
200<div?class="example">
201<code>text-shadow:?1px?1px?2px?#999;</code>
202<p?style="background:?#FFF;?color:?#000;?text-shadow:?1px?1px?2px?#999;">
203Text?shadows?were?defined?in?1997?and?became?applicable?in?2009
204</p>
205</div>
206
207<div?class="example">
208<code>text-shadow:?2px?2px?3px?#999;</code>
209<p?style="background:?#FFF;?color:?#069;?text-shadow:?2px?2px?3px?#999;">
210
211Text?shadows?were?defined?in?1997?and?became?applicable?in?2009
212</p>
213</div>
214
215<div?class="example">
216<code>text-shadow:?0?0?8px?#000;</code>
217<p?style="background:?#369;?color:?#FC0;?text-shadow:?0?0?8px?#000;">
218Text?shadows?were?defined?in?1997?and?became?applicable?in?2009
219</p>
220</div>
221
222<h2>Glowing?Borders</h2>
223
224<div?class="example">
225<code>text-shadow:?0?0?11px?#0F0;</code>
226
227<p?style="background:?#000;?color:?#0F0;?text-shadow:?0?0?11px?#0F0;">
228Text?shadows?were?defined?in?1997?and?became?applicable?in?2009
229</p>
230</div>
231
232<div?class="example">
233<code>text-shadow:?0?0?5px?#FF0;</code>
234<p?style="background:?#000;?color:?#FFF;?text-shadow:?0?0?5px?#FF0;">
235Text?shadows?were?defined?in?1997?and?became?applicable?in?2009
236</p>
237</div>
238
239<div?class="example">
240<code>text-shadow:?0?0?3px?#F90;</code>
241<p?style="background:?#FFF;?color:?#000;?text-shadow:?0?0?3px?#F90;">
242
243Text?shadows?were?defined?in?1997?and?became?applicable?in?2009
244</p>
245</div>
246
247<h2>Unusual?Effects</h2>
248
249<div?class="example">
250<code>text-shadow:?0?7px?11px?#390;</code>
251<p?style="background:?#FFF;?color:?#000;?text-shadow:?0?7px?11px?#390;">
252Text?shadows?were?defined?in?1997?and?became?applicable?in?2009
253</p>
254</div>
255
256<div?class="example">
257<code>text-shadow:?0px?-15px?0?#F00;</code>
258
259<p?style="background:?#FFF;?color:?#000;?text-shadow:?0px?-15px?0?#F00;">
260Text?shadows?were?defined?in?1997?and?became?applicable?in?2009
261</p>
262</div>
263
264<div?class="example">
265<code>text-shadow:?0?0?11px?#FF6;</code>
266<p?style="background:?#000;?color:?#000;?text-shadow:?0?0?11px?#FF6;">
267Text?shadows?were?defined?in?1997?and?became?applicable?in?2009
268</p>
269</div>
270
271<div?class="example">
272<code>text-shadow:?0?0?8px?#000;</code>
273<p?style="background:?#FFF;?color:?#CCC;?text-shadow:?0?0?8px?#000;">
274
275Text?shadows?were?defined?in?1997?and?became?applicable?in?2009
276</p>
277</div>
278
279<address>©?<a?href="http://dupcit.com/">Geovin?Du</a>,
280created?in?<a?href="http://dupcit.com/1188980640">September?2009</a><br>
281</address>
282
283</body>
284</html>
更多專業(yè)前端知識，請上 【猿2048】www.mk2048.com 創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎勵來咯，堅持創(chuàng)作打卡瓜分現(xiàn)金大獎
總結(jié)
以上是生活随笔為你收集整理的文字阴影-CSS Text-Shadow的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： css 汉字注音，日本语片假名
- 下一篇： 5：CSS元素类型