今天完成的事情：

准备小课堂

布局任务八

明天计划的事情：

布局任务八

把小课堂的收尾工作弄完

遇到的问题： 

给四周设置边框阴影，发现右边少了一块。

但是最右边盒子的边框阴影是完整的。

推测是盒子发生堆叠。盒子全部往左边移动了部分距离。

给盒子设施 margin-right:0.3rem;后：

边框又回来了。

也就是说，页面下方的五个logo盒子往左边发生了偏移，并且遮盖住了左边盒子的部分。

.logo {
    margin-bottom:6rem;
}
.logo-alibaba,
.logo-jinshan,
.logo-huanxin,
.logo-ronglian,
.logo-qiniu {
    height: 10rem;
    background: url("logo.png") no-repeat;
    background-size: 66rem;
    background-color:#fff;
    margin-right:0.3rem;
}
.logo-alibaba:hover,
.logo-jinshan:hover,
.logo-huanxin:hover,
.logo-ronglian:hover,
.logo-qiniu:hover {
    box-shadow: 0 0 0.4rem #d7d7d7;
}
.logo-alibaba {
    background-position:1.1rem 0.1rem;
}
.logo-jinshan {
    background-position:-13rem 0.1rem;
}
.logo-huanxin {
    background-position:-27rem -0.3rem;
}
.logo-ronglian {
    background-position:-42rem -0.5rem;
}
.logo-qiniu {
    background-position:-56rem -0.4rem;
}

<div class="row logo">
    <div class="col-md-2 col-md-offset-1 col-xs-12 col-sm-12 col-lg-2 col-lg-offset-1 logo-alibaba">
    </div>
    <div class="col-md-2  col-xs-12 col-sm-12 col-lg-2  logo-jinshan">
    </div>
    <div class="col-md-2  col-xs-12 col-sm-12 col-lg-2  logo-huanxin">
    </div>
    <div class="col-md-2  col-xs-12 col-sm-12 col-lg-2  logo-ronglian">
    </div>
    <div class="col-md-2  col-xs-12 col-sm-12 col-lg-2  logo-qiniu">
    </div>
</div>

仔细想了一下，盒子应该没有发生偏移。

是边框阴影的层叠顺序没盒子高，所以被盒子挡在了下面？

重新实验了下

给盒子的:hover加上z-index后

.logo-alibaba:hover,
.logo-jinshan:hover,
.logo-huanxin:hover,
.logo-ronglian:hover,
.logo-qiniu:hover {
    box-shadow: 0 0 0.4rem #d7d7d7;
    z-index:5;
}

边框又回来了。

也就是说原因是：

是边框阴影的层叠顺序没盒子高，所以被盒子挡在了下面

收获：

发现昨天的box-shadow用法不太记得了，重新学习下：

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

第一个属性：代表是垂直的这条边。为正则代表在盒子右边框，为负则代表在盒子左边框。

第二个属性代表的是水平的边。为正则代表在盒子下边框，为相反。

第三个属性是代表模糊度的

第四个是代表边框阴影的宽度的

第五个是代表边框阴影颜色

第六个是代表边框阴影由外边该为里边，同时h-shadow v-shadow的位置也会发生180度的变化。使用了inset值后，原本在右边垂直边的阴影会跑到左边边框内部。原本下方水平边的阴影会跑到上方水平边的内部。

进度：task8

任务开始时间：2018.5.22

预计结束时间：2018.5.29

是否有延期风险：无

禅道：http://task.jnshu.com/zentao/project-task-687.html