HTML5+CSS3  文字阴影和阴影位移
text-shadow属性可以撑持给文字加上阴影，这样在设计时可以通过CSS 3设置增添文字的质感，而不用利用任何图片。
语法：
text-shadow ： none | <length> none | [<opacity>, ] * <opacity>
或者
text-shadow ：none | <color> [, <color> ]*
上述语法的参数含义如下：
● color  指定颜。
● length  由浮点数字和单位标识符组成的长度值。可为负值。指定阴影的水平延伸距离。
● opacity  由浮点数字和单位标识符组成的长度值。不可为负值。指定模糊效果的作用距离。如果你仅仅需要模糊效果，将前两个length全部设定为0。
通过上述text-shadow属性，可以添加阴影。而最重要的阴影不能与文本内容相重叠，否则将无法显示出阴影效果。
因此，用户需要设置阴影的位移距离，即是阴影与文本内容之间的距离。
语法：
text-shadow：Apx  Bpx  #color；
其中，参数A值是指文本X轴上的位移；而B值指文本Y轴上的位移，color指阴影的颜值。
提示：
px就是表示pixel，像素，是屏幕上显示数据的最基本的点。
html5颜代码
例如，给<h1>标签添加文字阴影，如：
h1 {text-shadow: 0.1em 0.1em #333;}
上述样式中，前面0.1em表示X轴的位移、而后面的0.1em表示Y轴值的位移，其颜为#333。
提示：
em即％，在CSS中，1em＝100％，是一个比率，结合CSS继承关系使用，具有灵活性。em是相对长度单位，相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。
下面通过示例，来了解一下阴影效果。
示例：14-1  text-shadow.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>text-shadow设置阴影</title>
<style type="text/css">
body {
    margin:20px 0px 0px 20px;
}
h1 {
    text-shadow: 5px 5px #FF6600;
    font-family:"黑体";
    font-size:16px;
}
h2 {
    margin-top:35px;
    font-family:"华文楷体";
    font-weight:bold;
    font-size:18px;
    text-shadow:5em 5em #FFCC66;
}
</style>
</head>
<body>
<h1>给文本添加阴影效果</h1>
<h2>已经添加阴影效果</h2>
</body>
</html>
执行上述代码，用户可能看到网页中，已经显示的文本阴影效果。而针对不同的单位，其阴影显示的位置也不同。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。