求助,想问下div+css中这种投影效果怎么做的

html-css032

求助,想问下div+css中这种投影效果怎么做的,第1张

css中有 box-shadow 和 text-shadow 两种投影效果 第一种是框投影,第二种是文字投影,具体参数请参考

http://www.w3school.com.cn/cssref/pr_text-shadow.asp

http://www.w3school.com.cn/cssref/pr_box-shadow.asp

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