本文所分享的知识点是【CSS text-shadow属性】，欢迎您喜欢我爱IT技术网所分享的教程、知识、经验或攻略，下面是详细的讲解。
CSS text-shadow属性
<!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 http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="Keywords" content="" />
<meta name="Description" content="" />
<style type=text/css>
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {margin:0;padding:0;}
a{text-decoration:none;}
ol,ul {list-style: none;}
table {border-collapse: collapse;border-spacing:0;}
h1,h2,h3,h4,h5,h6 {font-size:100%;font-weight:normal;}
address,caption,cite,code,dfn,em,strong,th,var {font-style:normal;font-weight:normal;}
img{border:none;}
.clearfix:after {content:"\0020";display:block;height:0;clear:both;}
.clearfix{zoom:1;}
body{font-family:"微软雅黑","宋体",Geneva, sans-serif; font-size:12px;background:#ebebeb;}
#wrapper{
margin:30px 0 30px 150px;
}
#wrapper #showCss{
background:#48A890;
width:60px;
height:25px;
-moz-border-radius: 5px;
-khtml-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
line-height:25px;
cursor:pointer;
text-align:center;
margin-bottom:20px;
}
#wrapper .code{
margin:8px 0 10px 52px;
}
#wrapper code{
font-family:Consolas,"Bitstream Vera Sans Mono",monospace,"Courier New";
background:#f3ffae;
padding:5px;
color:#333;
}
#wrapper h2{
font-size:35px;
font-weight:bold;
}
#wrapper h1{
font-size:20px;
color:#48A890;
font-family:Georgia;
font-style:italic;
margin-bottom:30px;
text-shadow: 0 1px #fff;
}
#wrapper span a{
font-size:12px;
margin-left:20px;
text-decoration:underline;
color:#000;
letter-spacing:1px;
}
h2#test1{
text-shadow: 1px 1px #40730e;
color:#92bf30;
}
h2#test2{
text-shadow: 1px 1px 3px #000;
color:#676767;
}
h2#test3{
text-shadow: 0px -1px #bbb,0 1px #fff;
color:#e3e1e1;
}
h2#test4{
text-shadow: -1px -1px 3px #ffb69a,1px 1px 3px #922e09,-1px -1px #ffb69a,1px 1px #922e09;
color:#e73f00;
}
h2#test5{
margin-top:40px;
text-shadow:0 0 4px white, 0 -5px 4px #FFFF33, 2px -10px 6px #FFDD33, 2px -15px 11px #FF8800, 2px -25px 18px #FF2200;
color:#000;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.code').css('display','none');
$('#showCss').click(function(){
$('.code').slideToggle(500);
$(this).text($(this).text()=='显示CSS' ? '隐藏CSS':'显示CSS');
return false;
});
});
</script>
</head>
<body>
<div id="wrapper">
<h1>Text Shadow Use CSS<span><a href="http://www.ediyang.com">ediyang.com</a></span></h1>
<div id="showCss">显示CSS</div>
<h2 id="test1">1 : This is heading with text-shadow 中文标题</h2>
<div class="code">
<code>
text-shadow: 1px 1px #40730e;
color:#92bf30;
</code>
</div>
<h2 id="test2">2 : This is heading with text-shadow 中文标题</h2>
<div class="code">
<code>
text-shadow: 1px 1px 3px #000;
color:#676767;
</code>
</div>
<h2 id="test3">3 : This is heading with text-shadow 中文标题</h2>
<div class="code">
<code>
text-shadow: 0px -1px #bbb,0 1px #fff;
color:#e3e1e1;
</code>
</div>
<h2 id="test4">4 : This is heading with text-shadow 中文标题</h2>
<div class="code">
<code>text-shadow: -1px -1px 3px #ffb69a,1px 1px 3px #922e09,-1px -1px #ffb69a,1px 1px #922e09;
color:#e73f00;
</code>
</div>
<h2 id="test5">5 : 燃烧吧!火鸡</h2>
<div class="code">
<code>text-shadow:0 0 4px white, 0 -5px 4px #FFFF33, 2px -10px 6px #FFDD33, 2px -15px 11px #FF8800, 2px -25px 18px #FF2200;
color:#000;
</code>
</div>
</div>
</body>
</html>
提示：您可以先修改部分代码再运行
关于CSS text-shadow属性的相关讨论如下：
相关问题：CSS中，是不是IE不识别text-shadow:这个属性？请问...
答：设置透明度 filter:alpha(opacity=50); /*IE滤镜，透明度50%*/ -moz-opacity:0.5; /*Firefox私有，透明度50%*/ opacity:0.5;/*其他，透明度50%*/ >>详细
相关问题：CSS里面whitespace属性和textshadow属性是如何用的...
答：whiteSpace 属性设置如何处理文本中的空白符（比如空格和换行符）。 text-shadow 规定添加到文本的阴影效果。 >>详细
相关问题：excel 的shadow text在哪里
答：excel应该没有的 text-shadow给文字加上阴影，利用css3属性增加文字的质感而不用使用任何图片。 语法：text-shadow:h-shadowv-shadowblurcolor; >>详细
- 评论列表（网友评论仅供网友表达个人看法，并不表明本站同意其观点或证实其描述）
-