::before和::after這兩個(gè)主要用來給元素的前面或后面插入內(nèi)容，這兩個(gè)常和"content"配合使用，使用的場景最多的就是清除浮動(dòng)。
.clearfix::before,
.clearfix::after {
content: ".";
display: block;
height: 0;
visibility: hidden;
}
.clearfix:after {clear: both;}
.clearfix {zoom: 1;}
當(dāng)然可以利用他們制作出其他更好的效果，比如右側(cè)中的陰影效果，也是通過這個(gè)來實(shí)現(xiàn)的。
關(guān)鍵代碼分析：
.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)都添加一個(gè)空元素，然后為這兩個(gè)空元素添加陰影特效。
想看這個(gè)知識(shí)點(diǎn)深入講解的小伙伴請(qǐng)觀看《css3實(shí)現(xiàn)圖片陰影效果》中的第1-6小節(jié)。
請(qǐng)驗(yàn)證，完成請(qǐng)求
由于請(qǐng)求次數(shù)過多，請(qǐng)先驗(yàn)證，完成再次請(qǐng)求
打開微信掃碼自動(dòng)綁定
綁定后可得到
使用 Ctrl+D 可將課程添加到書簽
舉報(bào)