注意：本篇文章不会过多的介绍基础知识，因为没有必要，网上有很多基础教程完全可以搜索的到，这篇文章主要是对CSS的研究，通过它可以提高你的编码技术水平，如果其中有不懂的完全可以搜索。
currentColor编码实践，currentColor它会继承当前文字颜色
这个dome演示的情况是，color颜色和边框颜色是一样的，hover上去也是一样。原本我们可能会写color:red;border-color:red;但如果使用currenColor会更简单。
代码：
<style>
#box{
width:30vw;
height:30vh;
line-height:30vh;
margin:10vh auto;
color:#333;
border:1px solid currentColor;
text-align:center;
}
#box:hover{
color:red;
}
</style>
<div id="box">追梦子</div>
从中我们可以发现当color颜色变了currentColor颜色也会相应的改变。
::before、::after实践
我相信网页上有很多这种效果吧，其实用::before和::after可以轻松解决这个问题。
代码：
<style>
#box{
text-align:center;
position:relative;
}
#box::before{
content:'';
position:absolute;
left:0;
top:50%;
width:100%;
height:1px;
background-color:#ccc;
z-index:-1;
}
#box::after{
content:'测试';
background-color:#fff;
padding:0 5px;
}
</style>
<div id="box"></div>
那如果是垂直方向的呢？
代码：
<style>
body,div{
margin:0;
padding:0;
}
#box{
position:relative;
margin-left:100px;
}
#box::before{
content:'';
position:absolute;
left:15px;
top:0px;
width:1px;
height:100vh;
background-color:#ccc;
}
#box::after{
content:'测试';
background-color:#fff;
position:absolute;
top:50vh;
left:0;
}
</style>
<div id="box"></div>
这里用了vh单位，vh可以动态获取屏幕高度，1vh等于1%的屏幕高度。
还有这种情况。
代码：
<style>
#box{
position:relative;
}
#box::before{
content:'';
position:absolute;
left:0;
top:0;
width:10%;
height:1px;
background-color:red;
}
#box::after{
content:'';
position:absolute;
left:0;
top:0;
width:100%;
height:1px;
background-color:#dedede;
z-index:-1;
}
</style>
<div id="box"></div>
border或box-shadow实现模态框
因为border不能使用百分比所有使用一个超大的值就好了。噢，可以使用vw单位，其实有些很简单的东西可以解决很多看似复杂的事，只是我们没有去思考罢了。
<style>
#box{
position:fixed;
left:50%;
top:50%;
width:200px;
height:200px;
transform:translate(-50%,-50%);
border:10000px solid rgba(0,0,0,0.3);
}
</style>
<div id="box">追梦子前端博客</div>
<p>从前有座山...</p>
在来一个box-shadow的实现
<style>
#box{
position:fixed;
left:50%;
top:50%;
width:200px;
height:200px;
transform:translate(-50%,-50%);
box-shadow:0 0 0 100vw rgba(0,0,0,0.3);
}
</style>
<div id="box">追梦子前端博客</div>
<p>从前有座山...</p>
效果一样就不截图了。
别和我说兼容性，学习那有那么多事，一件事，学！
利用box-shadow制作汉堡菜单
<style>
#box{
width:100px;
box-shadow:0px 0px 0px 3px #000,0px 12px 0px 3px red,0
px 25px 0px 3px #000;
}
</style>
<div id="box"></div>
少一个元素算一个元素。