前言

box-shadow: h-shadow v-shadow blur spread color inset;

参数值	描述
h-shadow (X轴偏移量)	必需。水平阴影的位置。允许负值。
v-shadow (Y轴偏移量)	必需。垂直阴影的位置。允许负值。
blur (阴影模糊半径)	可选。模糊距离。
spread (阴影扩展半径)	可选。阴影的尺寸。
color (阴影颜色)	可选。阴影的颜色。请参阅 CSS 颜色值。
inset (投影方式)	可选。将外部阴影 (outset) 改为内部阴影。

文档来自=>W3Cschool

Step -- 实例讲解

Step-1：

box-shadow: 0 0 5px #ccc;// x，y偏移量为0  5px的模糊半径

image.png

Step-2：

# 改变X轴偏移量
box-shadow: 5px 0 5px #ccc;// 水平偏移5px

image.png

Step-3：

# 改变Y轴偏移量
box-shadow: 0 5px 5px #ccc;// 垂直偏移5px

image.png

Step-4：

# 改变X、Y轴偏移量
box-shadow: 3px 5px 5px #ccc;

image.png

Step-5：

# 改变X、Y轴偏移量,可以为负值
box-shadow: -3px -5px 5px #ccc;
box-shadow: -3px 5px 5px #ccc;
box-shadow: 3px -5px 5px #ccc;

image.png

Step-6：

# 设置inset
box-shadow: -3px -5px 5px #ccc inset;
box-shadow: -3px 5px 5px #ccc inset;
box-shadow: 3px -5px 5px #ccc inset;

image.png

Step-7：
注意：box-shadow 向框添加一个或多个阴影。
该属性是由逗号分隔的阴影列表，每个阴影由 2-4 个长度值、可选的颜色值以及可选的 inset 关键词来规定。省略长度的值是 0。

box-shadow:-3px -5px 5px blue inset,3px 5px 5px red,3px 5px 5px green inset,-3px -5px 5px black;

image.png

Step-8：

#Demo的实例

#html
<div class="main">
      <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
        </ul>
    </div>

#css
body,html{background: #fafafb;}
 *{padding: 0;margin: 0;}
ul li{list-style: none;}
.main{padding: 100px 0}
.main ul{
       width: 1200px;
       margin: 0 auto;
}
.main ul li {
       width: 360px;background: #fff;height: 360px;line-height:360px;display: block;float: left;margin-bottom: 60px;text-align: center;font-size: 100px;
       color: #ccc;
       border-radius: 5px;
       -webkit-border-radius: 5px;
      -moz-border-radius: 5px;
      transition: all .4s;
      -webkit-transition: all .4s;
      -moz-transition: all .4s;
}
.main ul li:nth-child(3n+2){
      margin-left:60px;margin-right:60px;
}

.main ul li:hover{
      box-shadow: 1px 4px 10px 2px #ccc;
      -webkit-box-shadow: 1px 4px 10px 2px #ccc;
      -moz-box-shadow: 1px 4px 10px 2px #ccc;
      transform: translateY(-2%);
}

Demo地址
在线操作

原文blog：http://codehtml.cn