今天完成的事情 :今天任务8又前进一点点明天应该就可以把任务八的第一个页面写完了 还看了阴影效果 box-shadow属性

遇到的问题:

图片不知道怎么让5个分等成5份在一排里面  还有图片缩小以后的问题

还有图片阴影的问题 阴影的文档已经看了但是还没有用

怎么去解决的:第一个问题已经解决了  剩下的两个问题还没有解决

今天的收获: 

边框阴影（box-shadow）的基本语法：

box-shadow：color  h-shadow  v-shadow blur spread  inset；

color：阴影颜色 ------------ 可选

h-shadow ：水平偏移量 ----必选          

v-shadow：垂直偏移量-----必选

blur：模糊距离 -------------可选

spread：阴影尺寸---------- 可选

inset：内阴影 --------------可选

例子：

css部分：

.div1{

            width:200px;

            height:200px;

            margin:20px auto;

            line-height: 200px;

            text-align: center;

            background: cadetblue;

            border:2px solid darkslategray;

            box-shadow: darkgrey 10px 10px 30px 5px ;//边框阴影

        }

内外阴影

在边框阴影（box-shadow）的基本语法中，参数inset是可选可不选的，选参数inset，将外部阴影改为内部阴影；而不选参数inset，即默认情况下是外部阴影的。

例子：

css部分：

.div2{

            width:200px;

            height:200px;

            margin:50px auto;

            line-height: 200px;

            text-align: center;

            background: burlywood;

            border:2px solid #e4007e;

            box-shadow: darkgrey 0px 0px 30px 5px inset;//边框内阴影

        }

阴影尺寸（参数spread）

阴影尺寸就是指阴影外延出去总的长度。将除阴影尺寸以外的值都设置为0，就能直观的查看阴影尺寸。

例子：

css部分：

.div3{

            width:200px;

            height:200px;

            margin:50px auto;

            line-height: 200px;

            text-align: center;

            background: salmon;

            border:2px solid #e4007e;

            box-shadow: darkgrey 0px 0px 0px 10px inset;

        }

        .div4{

            width:200px;

            height:200px;

            margin:50px auto;

            line-height: 200px;

            text-align: center;

            background: salmon;

            border:2px solid #e4007e;

            box-shadow: darkgrey 0px 0px 0px 10px;

        }

模糊距离（blur）

把除模糊距离外的其他值都设置为0，模糊距离设置为200px，与边长相等，对比边框内外阴影的效果

例子：

css部分：

 .div5{

            width:200px;

            height:200px;

            margin:300px auto;

            line-height: 200px;

            text-align: center;

            background: skyblue;

            border:2px solid #e4007e;

            box-shadow: darkgrey 0px 0px 0px 200px;

        }

        .div6{

            width:200px;

            height:200px;

            margin:300px auto;

            line-height: 200px;

            text-align: center;

            background: skyblue;

            border:2px solid #e4007e;

            box-shadow: darkgrey 0px 0px 0px 200px inset;

        }

html部分

<div class="div5">边框外阴影的模糊距离示例</div>

<div class="div6">边框内阴影的模糊距离示例</div>

明天计划学习什么:明天完成任务8的第一个页面吧