欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

CSS偽元素before、after設置特殊效果:制作時尚焦點圖相框

  發(fā)布時間：2012-12-12 16:41:53   作者：佚名   我要評論
在css選擇器中有這樣子的寫法div:before、div:after，對于before、after來說有部分人是相當陌生的,那么這兩個標簽是什么呢？有什么用處？本文將詳細介紹，需要的朋友可以參考下
在css選擇器中有這樣子的寫法div:before、div:after，對于before、after來說有部分人是相當陌生的，那么這兩個標簽是什么呢？有什么用處？
:befor、:after是CSS的偽元素，什么是偽元素呢？偽元素用于向某些選擇器設置特殊效果。

我們用CSS手冊可以查詢到其基本的用法：
E:before/E::before 設置在對象前（依據對象樹的邏輯結構）發(fā)生的內容。用來和content屬性一起使用
E:after/E::after 設置在對象后（依據對象樹的邏輯結構）發(fā)生的內容。用來和content屬性一起使用

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

復制代碼
代碼如下:

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

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

我們先去掉左右兩邊的邊框線，在邊框層，利用before偽元素，使用css樣式的定位，設置白色邊框，為什么要白色的邊框呢？因為要把之前的左右邊框中間部分遮掉，顏色設置成和背景色（本例的背景為白色背景）一致，這樣子看起來就相當于中間部分被裁剪掉了。
我們繼續(xù)祈禱上線兩條邊框線，方法同上，利用after偽元素，使用css樣式的定位，設置為白色邊框，遮掉上下邊框線的中間部分。這樣子一來，基本的形狀就出現了
美化步驟，調整我們的細節(jié)，邊框線調整為虛線。
 
了解了基本的思路和方法，是不是很簡單呢？那我們就開始動手寫代碼吧。
HTML代碼：

復制代碼
代碼如下:

<div>
<ul>
<li><a target="_blank"><img src="jiawin_1.jpg" _fcksavedurl=""jiawin_1.jpg"" alt="CSS偽元素before、after妙用：制作時尚焦點圖相框" />
<p></p></a></li>
<li><a target="_blank"><img src="jiawin_2.jpg" alt="CSS偽元素before、after妙用：制作時尚焦點圖相框" />
<p></p></a></li>
<li><a target="_blank"><img src="jiawin_3.jpg" alt="CSS偽元素before、after妙用：制作時尚焦點圖相框" />
<p></p></a></li>
<li id="noborder"><a target="_blank"><img src="jiawin_4.jpg" alt="CSS偽元素before、after妙用：制作時尚焦點圖相框" />
<p></p></a></li>
</ul>
</div>

CSS樣式代碼

復制代碼
代碼如下:

.content {width:788px; margin:auto; height:auto; overflow:hidden; padding:30px; }
.content ul li {float:left; height:176px; border-right:1px solid #DDDDDD; position:relative; padding:10px;}
.focus {background:rgba(250,250,250,0.25); width:174px; height:174px; border:1px dashed #666; position:absolute; left:10px; top:10px; display:none;}
.focus:before {width:174px; height:134px; border-left:1px solid #fff; border-right:1px solid #fff; content:''; position:absolute; left:-1px; top:20px;}
.focus:after {width:134px; height:174px; border-top:1px solid #fff; border-bottom:1px solid #fff; content:''; position:absolute; top:-1px; left:20px;}
.content ul li:hover .focus {display:block;}
#noborder {border-right:0 none;}

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

相關文章

最新評論