原文
前言
以下的实例是我从《CSS实战》中看到的实例，当我看到这些实例的时候，发现平时不是很在意的一些知识能够有这样的神奇的运用，在次分享给各位的读者，希望读者也能和我一样有所收获。
html文本
<p>Text Shadow</p>
不同方向的投影
<!--
右上角投影
-->
p{
text-align:center;
margin:0;
font-family:helvetica,arial,sans-serif;
color:#999;
font-size:80px;
font-weight:bold;
text-shadow:0.1em -0.1em #333;
}
<!--
右下角投影
-->
p{
text-align:center;
margin:0;
font-family:helvetica,arial,sans-serif;
color:#999;
font-size:80px;
font-weight:bold;
text-shadow:0.1em 0.1em #333;
}
<!--
左上角投影
-->
p{
text-align:center;
margin:0;
font-family:helvetica,arial,sans-serif;
color:#999;
font-size:80px;
font-weight:bold;
text-shadow:-0.1em -0.1em #333;
}
<!--
左下角投影
-->
p{
text-align:center;
margin:0;
font-family:helvetica,arial,sans-serif;
color:#999;
font-size:80px;
font-weight:bold;
text-shadow:-0.1em 0.1em #333;
}
投影的不同用法
<!--
通过阴影增加前景色与背景色的对比度
-->
p{
text-align:center;
margin:0;
font-family:helvetica,arial,sans-serif;
color:#999;
font-size:80px;
font-weight:bold;
text-shadow:0.1em 0.1em 0.3em #333;
}
通过阴影增加前景色与背景色的对比度
<!--
模糊文本
-->
p{
text-align:center;
margin:0;
font-family:helvetica,arial,sans-serif;
color:#fff;
font-size:80px;
font-weight:bold;
text-shadow:0.1em 0.1em 0.2em #000;
}
模糊文本
<!--
为白色文本定义三个不同颜色的阴影，模拟复杂的文本特效
-->
p{
text-align:center;
margin:0;
font-family:helvetica,arial,sans-serif;
color:#fff;
font-size:80px;
font-weight:bold;
text-shadow:0.2em 0.5em 0.1em #600,
-0.3em 0.1em 0.1em #060,
0.4em -0.3em 0.1em #006,;
}
为白色文本定义三个不同颜色的阴影，模拟复杂的文本特效
<!--
使用阴影叠加出的燃烧的文字特效
-->
p{
text-align:center;
padding:24px;
margin:0;
font-family:helvetica,arial,sans-serif;
color:#000;
background:#000;
font-size:80px;
font-weight:bold;
text-shadow:0 0 4px #fff,
0 -5px 4px #ff3,
2px -10px 6px #fd3,
-2px -15px 11px #f80
2px -25px 18px #f20;
}
使用阴影叠加出的燃烧的文字特效
<!--
使用阴影叠加出的立体文本特效
-->
p{
text-align:center;
padding:24px;
margin:0;
font-family:helvetica,arial,sans-serif;
color:#D1D1D1;
background:#CCC;
font-size:80px;
font-weight:bold;
text-shadow:-1px -1px #fff,
1px 1px #333;
<!--通过在文本的左上和右下各添加一个1px的错位补色阴影，可实现淡淡的立体效果-->
}
使用阴影叠加出的立体文本特效
<!--
使用阴影叠加出的凹文本特效
-->
p{
text-align:center;
padding:24px;
margin:0;
font-family:helvetica,arial,sans-serif;
color:#D1D1D1;
background:#CCC;
font-size:80px;
font-weight:bold;
text-shadow:1px 1px #fff,
-1px -1px #444;
<!--通过在文本的左上和右下各添加一个1px的错位补色阴影，可实现淡淡的凹文本效果-->
}
使用阴影叠加出的凹文本特效
<!--
使用阴影设计文本外发光特效
-->
p{
text-align:center;
padding:24px;
margin:0;
font-family:helvetica,arial,sans-serif;
font-size:80px;
font-weight:bold;
text-shadow:0 0 0.2em #F87,
0 0 0.2em #F87;<!--设计阴影不发生位移，同时定义阴影模糊显示-->
}
使用阴影设计文本外发光特效
