今天完成的事情：

任务7，首页

看了一下师兄之前写的日报，感觉脑图很好用的样子，就尝试着也自己拆分了一下

看了一下header的菜单图标制作

实际的代码还没写多少，就先不展示了

明天计划的事情：

继续任务7

收获：

菜单按钮实现方法（还没测试，渐变的transparent 参数还没来得及查）

1.用阴影实现

1.   .box{  

2.       width: 30px;  

3.       height: 0;  

4.       color: black;  

5.       box-shadow: 20px 10px 0 3px ,20px 0 0 3px ,20px 20px 0 3px;  //属性按顺序分别为 水平阴影位置、垂直阴影位置、模糊距离、阴影尺寸

6.   }  

2.用背景裁剪实现

1.   .box{  

2.        width: 30px;  

3.        height: 5px;  

4.        padding: 5px 0;  

5.        border-top: 5px solid black;  

6.        border-bottom: 5px solid black;  

7.        background-clip: content-box;  

8.        background-color: black;  

9.   }  

background-clip 属性规定背景的绘制区域。有三种属性(border-box 背景被裁剪到边框盒。padding-box 背景被裁剪到内边距框。content-box       背景被裁剪到内容框。)

3.用渐变函数

1.   .box{  

2.       width: 30px;  

3.       height: 15px;  

4.       background: linear-gradient(to bottom,black 0%,black 0%,transparent 20%,transparent 40%, black 40%,black 40%,transparent 60%,transparent 80%,black 100%);  

5.   }