1、首先新建一个html文件，命名为test.html，使用div标签创建一个模块，用于测试。如下图所示。
2、在test.html文件内，给div添加一个class属性，属性值设置为myway。
3、然后在css标签内，通过class设置div的样式，定义它的宽度为200px，高度为200px，背景颜色为黑色。
4、接着在css标签内，再使用box-shadow属性设置div的阴影效果，其中，左边阴影为绿色，顶部阴影为蓝色，底部阴影为红色，右边阴影为黄色。
5、最后在浏览器打开test.html文件，查看实现的效果，如下图所示就完成了。
1、新建一个HTML文档，并定义一个包含图片的<div>。
2、保存文件以后，预览文档的原始效果。
3、定义div的CSS属性，示例： <style>.shadow{ /*需要先定义元素的宽高*/width: 275px
height: 95px}</style>。
4、阴影部分的box-shadow详细设置。
5、设置之后，保存文件，预览查看BOX-SHADOW的效果。
语法：E
{box-shadow:
<length>
<length>
<length>?<length>?||<color>}
也就是：
E
{box-shadow:inset
x-offset
y-offset
blur-radius
spread-radius
color}
换句说：
对象选择器
{box-shadow:投影方式
X轴偏移量
Y轴偏移量
阴影模糊半径
阴影扩展半径
阴影颜色}
取值：
box-shadow属性至多有6个参数设置，他们分别取值：
阴影类型：此参数是一个可选值，如果不设值，其默认的投影方式是外阴影；如果取其唯一值“inset”,就是将外阴影变成内阴影，也就是说设置阴影类型为“inset”时，其投影就是内阴影；
X-offset:是指阴影水平偏移量其值可以是正负值可以取正负值，如果值为正值，则阴影在对象的右边，反之其值为负值时，阴影在对象的左边；
Y-offset:是指阴影的垂直偏移量，其值也可以是正负值，如果为正值，阴影在对象的底部，反之其值为负值时，阴影在对象的顶部；
阴影模糊半径：此参数是可选，，但其值只能是为正值，如果其值为0时，表示阴影不具有模糊效果，其值越大阴影的边缘就越模糊；
阴影扩展半径：此参数可选，其值可以是正负值，如果值为正，则整个阴影都延展扩大，反之值为负值是，则缩小；
阴影颜色：此参数可选，如果不设定任何颜色时，浏览器会取默认色，但各浏览器默认色不一样，特别是在webkit内核下的safari和chrome浏览器将无色，也就是透明，建议不要省略此参数。
.demo1
{
-webkit-box-shadow:
3px
3px
3px
#000
-moz-box-shadow:
3px
3px
3px
#000
box-shadow:
3px
3px
3px
#000
}
<div
class="demo1"></div>
