如何给DIV加投影效果
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何给DIV加投影效果相关的知识，希望对你有一定的参考价值。
如何给DIV加投影效果??
参考技术A 做两个DIV，或者三个<div id="div1" style="z-index:100">
</div>
<div id="div2" style="z-index:101">
</div>
调整好两个div的位置，让div1的背景颜色比div2的深一点。这样看起来就有立体感了。并且div2要有border，要不然看不出效果的。
所谓要三个DIV，就是前面那两个div放在另一个div里，这样比较好管理。其实两个也一样。
第二个方法是一个div设置div的背景图片，自己做一个带阴影的图片放在一个没有边框的div里，看上去就象div有阴影了。 参考技术B 做两个层，一个内容层放上面，一个背景层放下面，背景层设置透明度，并且跟内容层的上面和左边分别有几个像素的距离来增加立体感！ 参考技术C 投影通过 box-shadow 属性启用。box-shadow 属性中值的顺序如下所示：
box-shadow: hoff voff bd sd color inset;
这里，hoff 指示水平偏移，voff 指示垂直偏移，bd 指示模糊距离，sd 指示扩散距离，color 指示阴影的颜色，inset 是一个关键字，在使用时指示阴影是内部阴影，而不是外部阴影。前两个值是属性工作所必需的值，所有值都必须按照列出的顺序指定。如果未指定颜色，则 Internet Explorer 9 使用黑色作为阴影颜色。
此处定义了每个值：
horizontal offset 此长度值是必需的。它指定阴影向右（正值）或向左（负值）延伸的距离。
vertical offset 此长度值是必需的。它指定阴影向下（正值）或向上（负值）延伸的距离。
实现给一个DIV加阴影效果！
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>阴影效果</title>
<style type="text/css">
div{
position: absolute;
left: 300px;
top: 300px;
width: 300px;
height: 300px;box-shadow: 0px 0px 100px 10PX red;
border: 1px solid red;
}
</style>
</head>
<body>
<div>
</div></body>
</html>
以上是关于如何给DIV加投影效果的主要内容，如果未能解决你的问题，请参考以下文章