发表于： 2018-09-27 21:50:26
1 698
今天完成的事情：（一定要写非常细致的内容，比如说学会了盒子模型，了解了Margin）
今天完成了任务七的第一个页面
明天计划的事情：（一定要写非常细致的内容）
完成接下来的部分
遇到的问题：（遇到什么困难，怎么解决的）
遇到了关于一些不知道如何去理解这个样式，就是一些东西要通过什么样的方式方法去实现它
收获：（通过今天的学习，学到了什么知识）
知道了怎么利用CSS 去绘制三个形状
我想绘制出这样的形状
我就这样写了下
<span style="font-family:Comic Sans MS;font-size:14px;">
<div class="menu-icon"></div></span>
可是我发现没有实现效果啊
我觉得可能是我这边出了问题。我看下要这样写
<span style="font-family:Comic Sans MS;font-size:14px;">
.menu-icon{ width: 30px; height: 25px; border-top: 5px solid #DD575C; border-bottom: 5px solid #DD575C; background-color: #DD575C; padding: 5px 0; }</span>
可是结果是这样的
然后我看了下，是这样的原因啊
是因为css默认的背景（颜色或图像）会应用到边框上，而我们希望背景只运用到div的内容上，需要将background-clip属性设置为content-box，此时背景颜色只在content内绘制，就实现了我们想要的效果：
最后我修改了下。是这样的
- .tab {width: 20px;height: 20px;padding: 5.4px 0;border-top: 3px solid white;border-bottom: 3px solid white;border-right: 0;border-left: 0;background-color: white;background-clip: content-box;outline: none;margin-left: 1.1rem;}
接着我修改了下HOVER的效果
这个是第一个
第三个
还有第四个
代码如下
返回列表
评论