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代碼的定義用途：.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，所以為白色。
小編推薦
熱門推薦