<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312" />
<title>CSS实验</title>
<style type="text/css">
<!--
.shadow {
background-color: #000000
height: 200px
width: 200px
}
.picture {
position: relative
left: -10px
top: -10px
height: 200px
width: 200px
border: 1px solid #000000
}
-->
</style>
</head>
<body>
<div class="shadow">
<img src="http://www.baidu.com/img/logo.gif" class="picture"/>
</div>
</body>
</html>
filter:shadow(color=#CCCCFF,direction=135)把图片用CSS定义，定义的样式在上面
color为投影的颜色direction为阴影的大小
css有很多效果不需要PS就能实现的，看你怎么运用了
我们在制作网页的时候可以用CSS3添加边框，那么如果要给边框添加阴影该怎么做呢？下面我给大家分享一下。
工具/材料SublimeText
首先打开Sublime Text软件，新建一个HTML文档，如下图所示
然后在html文档的Body区域插入一个div，如下图所示
接下来给div定义一些样式，注意其中的box-shadow就是定义边框阴影的，如下图所示
最后我们运行界面程序，你会看到边框已经被添加上阴影了，如下图所示
