css3的box-shadow

boxShadow 属性把一个或多个下拉阴影添加到框上。该属性是一个用逗号分隔阴影的列表，每个阴影由 2-4 个长度值、一个可选的颜色值和一个可选的 inset 关键字来规定。省略长度的值是 0。

语法：box-shadow: h-shadow v-shadow blur spread color inset;

h-shadow 必需的。水平阴影的位置。允许负值
v-shadow 必需的。垂直阴影的位置。允许负值
blur 可选。模糊距离
spread 可选。阴影的大小
color 可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表
inset 可选。从外层的阴影（开始时）改变阴影内侧阴影

1、盒子阴影:水平 垂直 影子

<div class="box box1">box1</div>

css

* {
  padding: 0;
  margin: 0;
}

.box {
  width: 300px;
  height: 300px;
  background-color: lightcyan;
  margin: 100px auto;
  transition: box-shadow 0.6s ease;
}

.box1 {
  box-shadow: 10px 10px 10px gray;
}

代码演示：

2、我们也可以将影子偏移调的大一些。这样看起来更加明显；

<div class="box box2">box2</div> <div class="box box3">box3</div>

css

.box2{ box-shadow: 100px 0 10px gray; } .box3{ box-shadow: 50px 50px 10px gray; }

代码演示：