CSS3属性之text-shadow详解_建站学-个人建站指南,网页制作,网站设计,网站制作教程

本站之前也介绍过text-shadow的使用方法，可以参考http://www.jzxue.com/wangyesheji/css/201102/24-6335.html这里我们再次详细介绍一下该属性。
语法：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;

}

下面看实例：

<!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>

运行效果（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;
}

运行效果（Chrome）：

(责任编辑：admin)

搜索

热门标签:

CSS3属性之text-shadow详解

取值：

说明：