DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS詳解 >> CSS透視效果代碼實現教程
CSS透視效果代碼實現教程
編輯:CSS詳解     

突然有一種想法 ,想用css實現透視效果。經過多番實驗,發現用添加陰影的方法可以實現,但這需要添加許多的Div,看來有些麻煩。後來想到了用CSS的Border,因為邊框可以產生對角線效果,如果用兩個div來互補對角線,不就實現了嗎?來看border代碼應該如何編寫:

01 .perspective-outer{ 02 position:relative; 03 width:170px;/*透視效果元素的寬度+透視距離*/ 04 height:140px;/*透視效果元素的高度+透視距離*/ 05 } 06 .perspective-inner{ 07 border:1px solid #f60; 08 height:118px; 09 width:148px; 10 background-color:#fff; 11 } 12 .perspective-r, 13 .perspective-b{ 14 position:absolute; 15 width:0; 16 height:0; 17 } 18 .perspective-r{ 19 right:0; 20 height:100px;/*透視效果元素的高度(120px) - (border-top:20px)*/ 21 border-left:20px solid #000;/*右邊透視距離*/ 22 border-top:20px solid #fff;/*下邊透視距離*/ 23 } 24 .perspective-b{ 25 bottom:0; 26 width:150px;/*最外元素的寬度(170px) - border-left*/ 27 border-left:20px solid #fff; 28 border-top:20px solid #000; 29 }

CSS編寫好了,我們現在編寫Html部分,應用上邊的CSS定義:

1 <div class="perspective-outer"> 2 <div class="perspective-r"></div> 3 <div class="perspective-b"></div> 4 <div class="perspective-inner">透視效果</div> 5 </div>

最終的實現效果,請看下圖:

 CSS透視效果

 下面來說下部分CSS代碼的定義用途:.perspective-outer是用來定義高度和寬度,是相對定位,確保右邊和下邊的透視區域能定位到相應的位置,高度值和寬度值是要實現透視效果元素的高度+相應的透視距離。

.perspective-r只需設置高度值就行了,其值為.perspective-outer的高度減去border- top,.perspective-b只需設置寬度值,其值為.perspective-outer的寬度減去border- left。

.perspective-r的border-top和.perspective-b的border-left的width值決定透視角度。.perspective-r的border-left和.perspective-b的border-top的width值決定透視距離。其中.perspective-r的border-top和.perspective-b的border-left的color為父元素的背景顏色,測試頁面父元素為body,所以為白色。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved