<style>
.box{
width:200px;
height:200px;
background-color: red;
margin:50px auto;
color:green;
}
.box:nth-child(1){
/* 盒子阴影：水平位置 垂直位置 模糊值 阴影颜色 */
box-shadow: 0 0 10px #000;
}
.box:nth-child(2){
/* 盒子阴影：水平位置 垂直位置 模糊值 阴影颜色 */
/* 默认不定义阴影颜色，颜色与字体颜色一致 */
box-shadow: 0 0 10px;
}
.box:nth-child(3){
/* 盒子阴影：水平位置 垂直位置 模糊值 阴影颜色 */
/* 不定义模糊值，就是相当于复制了元素---不模糊的阴影 */
box-shadow:100px 10px ;
}
.box:nth-child(4){
/* 盒子阴影：水平位置 垂直位置 模糊值 阴影颜色 */
/* 不定义模糊值，就是相当于复制了元素---不模糊的阴影 */
box-shadow:-100px -10px;
}
.box:nth-child(5){
/* + inset 表示内阴影，不加表示外阴影 */
box-shadow:0 0 30px green inset;
}
.box:nth-child(6){
/* + inset 表示内阴影，不加表示外阴影 */
box-shadow:0 0 30px green inset;
}
.box:nth-child(7){
/* 阴影的模糊值 阴影的增强值（外延值） */
box-shadow:0 0 30px 40px green;
}
</style>
<body>
<!--
最常规的投影—— 不定偏移量，但是有模糊值的投影
box-shadow:0 0 10px pink;
最常规的投影—— 内阴影 + inset
box-shadow:0 0 10px pink inset;
带偏移量的投影——
box-shadow:10px 10px 10px pink; 正值对于外阴影来说是向右、向下移动
box-shadow:-10px -10px 10px pink; 负值值对于外阴影来说是向左、向上移动
模糊值、内阴影、阴影的颜色这几个是可选值（可以省略）
不带模糊值的投影
—— box-shadow:10px 10px pink; 相当于复制了一个元素在盒子的背后
不带颜色的投影
—— 默认与文字颜色 一致
-->
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</body>
