突然有一种想法 ，想用css实现透视效果。经过多番实验，发现用添加阴影的方法可以实现，但这需要添加许多的Div，看来有些麻烦。后来想到了用CSS的Border，因为边框可以产生对角线效果，如果用两个div来互补对角线，不就实现了吗？来看border代码应该如何编写：
.perspective-outer{
position:relative;
width:170px;/*透视效果元素的宽度+透视距离*/
height:140px;/*透视效果元素的高度+透视距离*/
}
.perspective-inner{
border:1px solid #f60;
height:118px;
width:148px;
background-color:#fff;
}
.perspective-r,
.perspective-b{
position:absolute;
width:0;
height:0;
}
.perspective-r{
right:0;
height:100px;/*透视效果元素的高度(120px) - (border-top:20px)*/
border-left:20px solid #000;/*右边透视距离*/
border-top:20px solid #fff;/*下边透视距离*/
}
.perspective-b{
bottom:0;
width:150px;/*最外元素的宽度(170px) - border-left*/
border-left:20px solid #fff;
border-top:20px solid #000;
}CSS编写好了，我们现在编写HTML部分，应用上边的CSS定义：
<div class="perspective-outer"> <div class="perspective-r"></div> <div class="perspective-b"></div> <div class="perspective-inner">透视效果</div> </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，所以为白色。
