CSS里如何写投影

html-css014

CSS里如何写投影,第1张

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

例如:

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的效果不太好,所以一般用于制作标题字。