CSS3属性之三：text-shadow_HTML5中文网 - 中国领先的HTML5技术门户
2013-10-15 22:12:49
[小 大]
已经帮助：人解决问题
语法：
text-shadow ： none | <length> none | [<shadow>, ] * <shadow> 或none | <color> [, <color> ]*
相关属性 ： 无
取值：
- <color> ：
- 指定颜色。
- <length> ：
- 由浮点数字和单位标识符组成的长度值。可为负值。指定阴影的水平延伸距离。
- <opacity> ：
- 由浮点数字和单位标识符组成的长度值。不可为负值。 指定模糊效果的作用距离。如果你仅仅需要模糊效果，将前两个 length 全部设定为 0 。请参阅 长度单位。
说明：
设置或检索对象中文本的文字是否有阴影及模糊效果。可以设定多组效果，方式是用逗号隔开。可以被用于伪类 :first-letter 和 :first-line 。对应的脚本特性为 textShadow
text-shadow是可以省略前缀的几个CSS属性之一，类似的还有box-shadow，它必须应用于文本，并它们有相同的四个参数：
x-offset 水平位移
y-offest 垂直位移
blur 模糊值
color of shadow 阴影颜色
h1 {
text-shadow: 0 1px 0 #fff;
color: #292929;
}
text-shadow: 0 1px 0 #fff;
color: #292929;
}
下面看实例：
<!DOCTYPE html>
<html>
<head>
<title>text-shadow</title>
<meta charset="utf-8" />
<style>
body {
background-color:#666;
}
h1 {
text-shadow:0 1px 0 #fff;
color:#292929;
font:bold 90px/100% Arial;
padding:50px;
}
</style>
</head>
<body>
<h1>Hello,World!</h1>
</body>
</html>
<html>
<head>
<title>text-shadow</title>
<meta charset="utf-8" />
<style>
body {
background-color:#666;
}
h1 {
text-shadow:0 1px 0 #fff;
color:#292929;
font:bold 90px/100% Arial;
padding:50px;
}
</style>
</head>
<body>
<h1>Hello,World!</h1>
</body>
</html>
运行效果（Chrome）：
下面用text-shadow实现空心字效果:
h1 {
text-shadow:0 1px #000, 0 -1px 0 #000, 1px 0 0 #000, -1px 0 0 #000;
color:#fff;
font:bold 90px/100% Arial;
}
text-shadow:0 1px #000, 0 -1px 0 #000, 1px 0 0 #000, -1px 0 0 #000;
color:#fff;
font:bold 90px/100% Arial;
}
运行效果（Chrome）：
（责任编辑：）
