<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>css text-shadow</title>
<meta name="Author" content="涂聚文" />
<!--[if lte IE 8]>
<script src="jquery.ie-opacity-polyfill.js"></script>
<![endif]-->
<style type="text/css">
/*
Geovin Du 塗聚文参考:
http://www.w3.org/Style/Examples/007/text-shadow.en.html
http://www.useragentman.com/blog/2011/04/14/css3-text-shadow-can-it-be-done-in-ie-without-javascript/
http://kilianvalkhof.com/2008/javascript/text-shadow-in-ie-with-jquery/
http://stackoverflow.com/questions/4205478/text-shadow-in-internet-explorer
http://msdn.microsoft.com/en-us/library/ms532847(v=vs.85).aspx
https://kremalicious.com/make-cool-and-clever-text-effects-with-css-text-shadow/
http://css-tricks.com/snippets/css/css-text-shadow/
*/
/*-webkit-text-shadow:0px 0px 10px #333; for chrome */
/*-text-shadow:0px 0px 10px #333; for all browser*/
/* text-shadow:0px 0px 10px #333;same as above*/
/*-moz-text-shadow:0px 0px 10px #333; for firefox */
/*-o-text-shadow:0px 0px 10px #333; for opera */
/*-ms-text-shadow:0px 0px 10px #333; for ie 9+ */
/*-khtml-text-shadow:0px 0px 10px #333; for gecko based browser*/
.fbod{
padding-top:20px;
font-weight:bold;
color:#000099;
margin-left:auto;
margin-right:auto;
text-shadow: 1px 1px 3px #666, -1px -1px 3px #FFF, 1px 1px #666, -1px -1px #FFF; /*Firefox,,Safari,Chrome,Opera,IE11*/
font-size:12px;
/*FILTER: Shadow(Color=#ffffff, Direction=30);width:600px;font-size:9pt;*/
/*filter: Shadow(Color=#00cc66, Direction=45);width:600px;font-size:10pt; IE fallback support for IE7, IE6, IE5.5, IE5... */
filter:progid:DXImageTransform.Microsoft.Chroma(Color=#666666)
progid:DXImageTransform.Microsoft.DropShadow(OffX=3, OffY=3, Color=#00cc66);/*IE fallback support for IE7, IE6, IE5.5, IE5... */
-ms-filter:"progid:DXImageTransform.Microsoft.Chroma(Color=#666666) progid:DXImageTransform.Microsoft.DropShadow(OffX=3, OffY=3, Color=#00cc66)"; /* IE8 support */
/* -moz-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%);*/
/*-ms-text-shadow:1px 1px 3px #666, -1px -1px 3px #FFF, 1px 1px #666, -1px -1px #FFF;IE 9*/
background-color:#fff;
padding-bottom:20px;
}
.demo10{
background-color:#ffffff;
}
.fbody{
zoom: 1;
font-weight:bold;
color: #000;
font-size:14px;
padding-bottom:20px;
letter-spacing:3px;/*字间距*/
line-height:28px;/*字行间距,这个数字必须要大于字体的大小*/
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-filter: "progid:DXImageTransform.Microsoft.Chroma(Color=#cccccc) progid:DXImageTransform.Microsoft.DropShadow(Color=#99cc99, OffX=3, OffY=3)";
filter: progid:DXImageTransform.Microsoft.Chroma(Color=#cccccc)
progid:DXImageTransform.Microsoft.DropShadow(OffX=3, OffY=3, Color=#00cc66);
}
</style>
<style type="text/css">
div.example {border: #603 dotted; padding: 0.5em; margin: 1em 2em}
div.example h3 {font-size: x-large; display: block; text-align: center;
border: none}
div.example1 {background: #CCF; padding: 1em}
div.example1 h3 {color: blue; text-shadow: #333 0.1em 0.1em}
div.example2 {background: #CCF; padding: 1em}
h3.example2a {color: blue; text-shadow: #333 0.1em 0.1em 0.05em}
h3.example2b {color: blue; text-shadow: black 0.1em 0.1em 0.2em}
div.example4 {background: #CCF; padding: 1em}
h3.example4a {color: white}
h3.example4b {color: white; text-shadow: black 0.1em 0.1em 0.2em}
h3.example5 {color: blue; text-shadow: 0.2em 0.5em 0.1em #600,
-0.3em 0.1em 0.1em #060, 0.4em -0.3em 0.1em #006}
div.example6 {background: #CCC; padding: 1em}
h3.example6a {color: #D1D1D1; text-shadow: -1px -1px white, 1px 1px #333;
letter-spacing: 2px;
filter: progid:DXImageTransform.Microsoft.DropShadow(OffX=-0.5, OffY=-0.5, Color=#FFF)
progid:DXImageTransform.Microsoft.Chroma(Color=#FFFFFF);
}
h3.example6b {color: #C8C8C8; text-shadow: 1px 1px white, -1px -1px #444;
letter-spacing: 2px}
div.example7 {background: #CCF; padding: 1em}
h3.example7a {color: blue; text-shadow: -1px 0 black, 0 1px black,
1px 0 black, 0 -1px black}
h3.example7b {color: #BBE; text-shadow: -1px 0 black, 0 1px black,
1px 0 black, 0 -1px black}
h3.example8a {text-shadow: 0 0 0.2em #8F7}
h3.example8b {text-shadow: 0 0 0.2em #F87, 0 0 0.2em #F87}
h3.example8c {text-shadow: 0 0 0.2em #87F, 0 0 0.2em #87F, 0 0 0.2em #87F}
.fiftyPercentOpaque{
opacity:0.5; /* Modern Browser support (including IE9) */
-moz-opacity:0.5;
-khtml-opacity: 0.5;
-ms-opacity: 0.5;
-o-opacity: 0.5;
/*-webkit-filter:*/
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=85)"; /* IE8 support */
filter:glow(color=red,strength=5);alpha(opacity=50); /* IE fallback support for IE7, IE6, IE5.5, IE5... */
text-shadow: 1px -1px rgb(255, 42, 42),
2px -2px rgb(255, 85, 85),
3px -3px rgb(255, 127, 127),
4px -4px rgb(255, 170, 170),
5px -5px rgb(255, 212, 212);
}
</style>
</head>
<body>
<div id="" class="demo10">
<p class="fbody" align="center">
<span id="zoom" class="fbody">
工程质量
<br />
<br />中办国人<br />
<br /><br />
<b>
代表着先进文化的前进方向”</b>
<br />
<a href="http://cpc.people.com.cn/n/2014/0903/c64102-25597639.html" target="_blank">是失职 不治本是不称职</a>
把预防和治本要求融入日常业务、改革发展和队伍建设中。
<br /><br />
</span>
</p>
<p class="fbod">
<span id="zoom" class="fbod">
抱着‘只要不出事，宁愿不做事’，甚至‘不求过得硬，只求过得去’的态度，敷衍了事。说得难听点儿，这不就是尸位素餐吗？这样的极大不负责！”--2014年07月14日 星期一 </span >
</p>
</div>
<pre>
h3.a {text-shadow: -1px -1px white, 1px 1px #333}
h3.b {text-shadow: 1px 1px white, -1px -1px #444}
</pre>
<div class=example>
<div class=example6>
<h3 class=example6a>I, Augustus (you know who)</h3>
<h3 class=example6b>That's extra, of course</h3>
</div>
</div>
<div class="fiftyPercentOpaque">
工作人员的调查结论报告、等等及相关图纸、文件(因未公示和告之).
</div>
</body>
</html>
demo: text-shadow
