如何用CSS制作投影效果

html-css027

如何用CSS制作投影效果,第1张

例如:

h1 {filter:dropshadow(color=gray, offx=5, offy=-5, positive=1)}

DropShadow(Color=gray, OffX=5, OffY=-5, Positive=1)。Dropshadow滤镜有四个参数,它们的含义为:

“Color”:代表投射阴影的颜色,我在本例中用的是“gray” ,但在实际应用中往往是用十六进制的颜色代码,如#FF0000为红色等等;

“offx”和“offy”:分别是X方向和Y方向阴影的偏移量,它必须用整数值,如果是正整数,那么表示阴影向X轴的右方向和Y轴的下方向。若是负整数值,阴影的方向正好相反。另外“offx”和“offy”数值的大小决定了阴影离开对象的距离;

“Positive”参数:是一个布尔值,如果为“TRUE(非0)”,那么就为任何的非透明像素建立可见的投影。如果为“FASLE(0)”,那么就为透明的像素部分建立透明效果。这句话可能不大好理解,不要着急,看了后面的例子,你就会明白的。

对文字加载Dropshadow滤镜比较方便的办法,是把Dropshadow滤镜加载到文字所在的表格单元格 td >上。从上面的效果图,我们可以看出当文字比较小时,使用Dropshadow的效果不太好,所以一般用于制作标题字。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>

<meta http-equiv="Content-Type" content="text/html charset=gb2312" />

<title>Untitled Document</title>

<style type="text/css">

div#pic{

background: url(http://cache.soso.com/wenwen/i/nlogo_ask1.gif) left top

width: 151px

height: 47px

border: 1px solid #000000

}

div#shadow{

width: 151px

height: 47px

background: #CCCCCC /*阴影颜色*/

position: relative /*设置阴影图层的位置为相对定位*/

left: 5px

top: -44px

z-index: -1 /*把阴影图层置于最底层*/

}

</style>

</head>

<body>

<div id="pic"></div>

<div id="shadow"></div>

</body>

</html>

用CSS做图层的投影效果,css2是做不到的,在css3中,我们可以通过box-shadow 内阴影与外阴影来实现,用法是,E {box-shadow:inset x-offset y-offset blur-radius spread-radius color},对象选择器 {text-shadow:投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色};这里我们通过代码来理解:

<html>

<head>

<style>

#nav{

width:900px

height:30px

-moz-box-shadow:5px 5px 5px #999 inset           

-webkit-box-shadow:5px 5px 5px #999 inset       

box-shadow:5px 5px 5px #999 inset

}

</head>

<body>

<div class="nav" >

</div>

     

</body>

</html>

效果如图: