html怎么给文字加投影？_随笔

CSS3的文字阴影—text-shadow

IE中：filter:shadow(Color=颜色值,Direction=数值,Strength=数值)}

.demo {text-shadow: 0 0 20px redfilter:shadow(Color=#0000ff,Direction=10,Strength=10)}

box-shadow: 0px 0px 3px 1px rgba(0,0,0,.2)/****1是调整左边位置****/

-moz-box-shadow: 0px 0px 3px 1px rgba(0,0,0,.2)/****2是调整下边位置****/

-o-box-shadow: 0px 0px 3px 1px rgba(0,0,0,.2)/****3是调正模糊度****/

-webkit-box-shadow: 0px 0px 3px 1px rgba(0,0,0,.2)/****4是调正投影大小****/

0px 0px 3px 1px

1234 分别是指以上四个。

rgba(0,0,0,.2) 颜色和透明度

复制下面代码就可以看到效果了：

前两个属性设置阴影的 X / Y 位移，第3个属性定义阴影的虚化程度，最后一个设置阴影的颜色。现在很对浏览器对css3支持不给力，就像IE现在还不支持阴影效果，但可以上百度搜一个.htc格式文件，链接就可以了。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>无标题文档</title>

<style>

.img{

width:142px

height:41px

-webkit-box-shadow: 10px 10px 14px #737373

-moz-box-shadow: 10px 10px 14px #737373

box-shadow: 10px 10px 14px #737373

}

</style>

</head>

<body>

</body>

</html>

欢迎分享，转载请注明来源：内存溢出

html怎么给文字加投影？