::before和::after
主要用來給元素的前面或後面插入内容，這兩個常和"content"配合使用，使用的場景最多的就是清除浮動。
.clearfix::before,
.clearfix::after {
content: ".";
display: block;
height: 0;
visibility: hidden;
}
.clearfix:after {clear: both;}
.clearfix {zoom: 1;}當然可以利用他們制作出其他更好的效果，比如右側中的隂影效果，也是通過這個來實現的。
關鍵代碼分析：
.effect::before, .effect::after{
content:"";
position:absolute;
z-index:-1;
-webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
-moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
box-shadow:0 0 20px rgba(0,0,0,0.8);
top:50%;
bottom:0;
left:10px;
right:10px;
-moz-border-radius:100px / 10px;
border-radius:100px / 10px;
}上面代碼作用在class名叫.effect上的div的前（before）後(after)都添加一個空元素，然後爲這兩個空元素添加隂影特效。
想看這個知識點深入講解的小夥伴,可以多了解一下css3實現圖片隂影效果的相關知識哦。
