css text-shadow

最新推荐文章于 2025-03-24 19:46:54 发布
原创最新推荐文章于 2025-03-24 19:46:54 发布 · 1.2k 阅读
0 ·
CC 4.0 BY-SA版权
文章标签：
#text-shadow
html 专栏收录该内容
3 篇文章
订阅专栏
本文详细介绍了如何使用 CSS 实现文本阴影效果，并提供了针对不同浏览器的兼容性解决方案，包括使用伪元素、CSS3 属性以及 JavaScript 聚合的方法。
<!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 />
	<b>
	力量之源。</b>
<br />
队伍建设中。
<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