7.27日音訊,css中before、after元素的應(yīng)用

發(fā)布日期：2013-07-27文章來源：首創(chuàng)網(wǎng)絡(luò)瀏覽次數(shù)：765次

7.27日音訊,css中before、after元素的應(yīng)用。在實(shí)際運(yùn)用中，一些用的少的屬性通常會(huì)被我們大家所忘記，但是有些屬性雖然用的少，但在實(shí)際應(yīng)用中卻能顯示出獨(dú)特的功能?，F(xiàn)在邯鄲網(wǎng)站建設(shè)首創(chuàng)網(wǎng)絡(luò)小編來給大家一塊說下這兩......

本文關(guān)鍵字：7.27日,音訊,css,中,before,、,after,元素,的,

　　7.27日音訊,css中before、after元素的應(yīng)用。在實(shí)際運(yùn)用中，一些用的少的屬性通常會(huì)被我們大家所忘記，但是有些屬性雖然用的少，但在實(shí)際應(yīng)用中卻能顯示出獨(dú)特的功能。現(xiàn)在邯鄲網(wǎng)站建設(shè)首創(chuàng)網(wǎng)絡(luò)小編來給大家一塊說下這兩個(gè)標(biāo)簽是什么？有什么用處？

　　:befor、:after是CSS的偽元素，什么是偽元素呢？偽元素用于向某些選擇器設(shè)置特殊效果。

　　我們用CSS手冊(cè)可以查詢到其基本的用法：

　　E:before/E::before設(shè)置在對(duì)象前（依據(jù)對(duì)象樹的邏輯結(jié)構(gòu)）發(fā)生的內(nèi)容。用來和content屬性一起使用

　　E:after/E::after設(shè)置在對(duì)象后（依據(jù)對(duì)象樹的邏輯結(jié)構(gòu)）發(fā)生的內(nèi)容。用來和content屬性一起使用

　　Ie6-7不支持

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

　　div:after{content:'任意字符串';}

　　現(xiàn)在我們大概知道before和after的大概用法了，那么我們就可以在元素的內(nèi)容之前或者之后插入新內(nèi)容。而插入的內(nèi)容我們也可以用css樣式來加以控制和美化。也許在平常中這樣子的標(biāo)簽用處不大，但是存在即是真理，哈哈，肯定有他的妙用之處，今天就來看看利用before和after制作的一個(gè)創(chuàng)意的時(shí)尚焦點(diǎn)圖相框，以后制作這種邊框線的時(shí)候我們可以完全拋棄圖片的做法，而且做出來的非常的精美。

　　制作思路以及方法：

　　1、在圖片層加多一層div，設(shè)置1像素的邊框線，邊框線有上下左右四條邊框，而我們想要的只是每兩條邊框線組成的類似小三角形的形狀，那么我們只要把四條邊框線的中間部分去掉，那不就實(shí)現(xiàn)了我們的效果。那我們應(yīng)該怎么把四條邊框線中間部分去掉？或者用什么東西把他蓋住，不讓他顯示出來？解決辦法就是，我們知道before和after偽元素可以在元素之前或者之后添加新的內(nèi)容，那我們就利用這兩個(gè)偽元素來蓋住四條邊框線的中間部分。

　　2、我們先去掉左右兩邊的邊框線，在邊框?qū)樱胋efore偽元素，使用css樣式的定位，設(shè)置白色邊框，為什么要白色的邊框呢？因?yàn)橐阎暗淖笥疫吙蛑虚g部分遮掉，顏色設(shè)置成和背景色（本例的背景為白色背景）一致，這樣子看起來就相當(dāng)于中間部分被裁剪掉了。

　　3、我們繼續(xù)去掉上下兩條邊框線，方法同上，利用after偽元素，使用css樣式的定位，設(shè)置為白色邊框，遮掉上下邊框線的中間部分。這樣子一來，基本的形狀就出現(xiàn)了

　　4、美化步驟，調(diào)整我們的細(xì)節(jié)，邊框線調(diào)整為虛線。

　　了解了基本的思路和方法，是不是很簡單呢？那我們就開始動(dòng)手寫代碼吧。

　　HTML代碼：

　　<divclass="content">

　　<ul>

　　<pclass="focus"></p></a></li>

　　<pclass="focus"></p></a></li>

　　<pclass="focus"></p></a></li>

#"target="_blank"><imgsrc="handan wangzhan.jpg"/>

　　<pclass="focus"></p></a></li>

　　</ul>

　　</div>

　　CSS樣式代碼

　　.content{width:788px;margin:auto;height:auto;overflow:hidden;padding:30px;}

　　.contentulli{float:left;height:176px;border-right:1pxsolid#DDDDDD;position:relative;padding:10px;}

　　.focus{background:rgba(250,250,250,0.25);width:174px;height:174px;border:1pxdashed#666;position:absolute;left:10px;top:10px;display:none;}

　　.focus:before{width:174px;height:134px;border-left:1pxsolid#fff;border-right:1pxsolid#fff;content:'';position:absolute;left:-1px;top:20px;}

　　.focus:after{width:134px;height:174px;border-top:1pxsolid#fff;border-bottom:1pxsolid#fff;content:'';position:absolute;top:-1px;left:20px;}

　　.contentulli:hover.focus{display:block;}

　　#noborder{border-right:0none;}

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

本文由邯鄲網(wǎng)絡(luò)公司首創(chuàng)網(wǎng)絡(luò)整理編輯發(fā)布，請(qǐng)勿轉(zhuǎn)載、復(fù)制、摘抄等！