在css選擇器中有這樣子的寫(xiě)法div:before、div:after，對(duì)于before、after來(lái)說(shuō)有部分人是相當(dāng)陌生的，那么這兩個(gè)標(biāo)簽是什么呢？有什么用處？
:befor、:after是CSS的偽元素，什么是偽元素呢？偽元素用于向某些選擇器設(shè)置特殊效果。

我們用CSS手冊(cè)可以查詢到其基本的用法：
E:before/E::before 設(shè)置在對(duì)象前（依據(jù)對(duì)象樹(shù)的邏輯結(jié)構(gòu)）發(fā)生的內(nèi)容。用來(lái)和content屬性一起使用
E:after/E::after 設(shè)置在對(duì)象后（依據(jù)對(duì)象樹(shù)的邏輯結(jié)構(gòu)）發(fā)生的內(nèi)容。用來(lái)和content屬性一起使用

Ie6-7 不支持
既然說(shuō)到了before、after，那么我們也要大概的了解下content，content用來(lái)和:after及:before偽元素一起使用，在對(duì)象前或后顯示內(nèi)容?；镜挠梅ㄈ缦拢?


現(xiàn)在我們大概知道before和after的大概用法了，那么我們就可以在元素的內(nèi)容之前或者之后插入新內(nèi)容。而插入的內(nèi)容我們也可以用css樣式 來(lái)加以控制和美化。也許在平常中這樣子的標(biāo)簽用處不大，但是存在即是真理，哈哈，肯定有他的妙用之處，今天就來(lái)看看利用before和after制作的一 個(gè)的時(shí)尚焦點(diǎn)圖相框，以后制作這種邊框線的時(shí)候我們可以完全拋棄圖片的做法，而且做出來(lái)的非常的精美。不信，就請(qǐng)先看看效果demo吧：
查看預(yù)覽
制作思路以及方法：
在圖片層加多一層div，設(shè)置1像素的邊框線，邊框線有上下左右四條邊框，而我們想要的只是每?jī)蓷l邊框線組成的類似小三角形的形狀，那么我們只要把四條邊 框線的中間部分去掉，那不就實(shí)現(xiàn)了我們的效果。那我們應(yīng)該怎么把四條邊框線中間部分去掉？或者用什么東西把他蓋住，不讓他顯示出來(lái)？解決辦法就是，我們知 道before和after偽元素可以在元素之前或者之后添加新的內(nèi)容，那我們就利用這兩個(gè)偽元素來(lái)蓋住四條邊框線的中間部分。

我們先去掉左右兩邊的邊框線，在邊框?qū)?，利用before偽元素，使用css樣式的定位，設(shè)置白色邊框，為什么要白色的邊框呢？因?yàn)橐阎暗淖笥疫吙蛑虚g部分遮掉，顏色設(shè)置成和背景色（本例的背景為白色背景）一致，這樣子看起來(lái)就相當(dāng)于中間部分被裁剪掉了。
我們繼續(xù)祈禱上線兩條邊框線，方法同上，利用after偽元素，使用css樣式的定位，設(shè)置為白色邊框，遮掉上下邊框線的中間部分。這樣子一來(lái)，基本的形狀就出現(xiàn)了
美化步驟，調(diào)整我們的細(xì)節(jié)，邊框線調(diào)整為虛線。
 
了解了基本的思路和方法，是不是很簡(jiǎn)單呢？那我們就開(kāi)始動(dòng)手寫(xiě)代碼吧。
HTML代碼：


CSS樣式代碼


通過(guò)這個(gè)例子是不是很方便的把這個(gè)效果做出來(lái)了呢？而且看看我們的代碼，是不是很簡(jiǎn)潔呢！哈哈……或許還有更好的方法來(lái)實(shí)現(xiàn)，我們可以一起探討。我 個(gè)人感覺(jué)其實(shí)div+css是很好的一門很容易手上但是功能性很強(qiáng)的技術(shù)，而且他很好玩很有趣。利用你的奇思妙想， 你可以做出各種意想不到的效果。期待你的作品哦。

最新評(píng)論