怎么用CSS做图层的投影效果？
我先做了个图层，然后用CSS给这个图层填充了个背景，我想再加上个投影。用CSS能做吗，怎么做呀！...
我先做了个图层，然后用CSS给这个图层填充了个背景，我想再加上个投影。用CSS能做吗，怎么做呀！
展开
2个回答
展开全部
用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>
效果如图：
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
这个可以有
举个例子比较直接
1. -webkit-box-shadow: 10px 10px 25px #ccc;（这是专对火狐浏览器的支持而设置的）
2. -moz-box-shadow: 10px 10px 25px #ccc;（这是对Safari和Chrome浏览器而设置的）
3. box-shadow: 10px 10px 25px #ccc;
前两个属性设置阴影的 X / Y 位移，这里分别是 10px，第3个属性定义阴影的虚化程度，最后一个设置阴影的颜色。文字阴影也可以这样设置： text-shadow: 2px 2px 5px #ccc;
现在很对浏览器兑css3支持不给力，就像IE现在还不支持阴影效果，但可以上百度搜一个.htc格式文件，链接就可以了.testbox{behavior: url(css/ie-css3.htc);}
举个例子比较直接
1. -webkit-box-shadow: 10px 10px 25px #ccc;（这是专对火狐浏览器的支持而设置的）
2. -moz-box-shadow: 10px 10px 25px #ccc;（这是对Safari和Chrome浏览器而设置的）
3. box-shadow: 10px 10px 25px #ccc;
前两个属性设置阴影的 X / Y 位移，这里分别是 10px，第3个属性定义阴影的虚化程度，最后一个设置阴影的颜色。文字阴影也可以这样设置： text-shadow: 2px 2px 5px #ccc;
现在很对浏览器兑css3支持不给力，就像IE现在还不支持阴影效果，但可以上百度搜一个.htc格式文件，链接就可以了.testbox{behavior: url(css/ie-css3.htc);}
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
