突然有一種想法 ,想用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,所以為白色。