提示：您可以先修改部分代碼再運行
css控製圖片透明效果代碼<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:///www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http:///www.w3.org/1999/xhtml"><head><meta http-equiv="content-type" content="text/html;charset=gb2312"><title>CSS效果</title><style type="text/css">.perspective-outer{position:relative;width:170px;/*要實現效果元素的寬度+距離*/height:140px;/*要實現效果元素的高度+距離*/margin:15px;float:left;}.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;/*下邊距離*/z-index:1000;}.perspective-b{bottom:0;width:150px;/*最外元素的寬度(170px)-border-left*/border-left:20px solid #fff;border-top:20px solid #000;z-index:1500;}/*test-2 style*/.test-2 .perspective-r{height:70px;/*最外元素的的高度(120px)-(border-top)*/border-top:50px solid #fff;}.test-2 .perspective-b{width:120px;/*最外元素的寬度(170px)-border-left*/border-left:50px solid #fff;}/*test-3 style*/.test-3 .perspective-outer{width:250px;/*要實現效果元素的寬度+距離*/height:220px;/*要實現效果元素的高度+距離*/}.test-3 .perspective-r{border-left:100px solid #000;border-top:100px solid #fff;}.test-3 .perspective-b{border-top:100px solid #000;border-left:100px solid #fff;}</style></head><body><h2>測試效果1</h2><!--一個效果元素--><div class="perspective-outer"> <div class="perspective-r"></div> <div class="perspective-b"></div> </div><!--一個效果元素--><!--一個效果元素--><div class="perspective-outer"> <div class="perspective-r"></div> <div class="perspective-b"></div> </div><!--一個效果元素--><!--一個效果元素--><div class="perspective-outer"> <div class="perspective-r"></div> <div class="perspective-b"></div> </div><!--一個效果元素--><!--一個效果元素--><div class="perspective-outer"> <div class="perspective-r"></div> <div class="perspective-b"></div> </div><!--一個效果元素--><br clear="all" /><div class="test-2"><h2>測試效果-改變角度</h2><p>分別修改.perspective-r的border-top和.perspective-b的border-left的width值，值越大角度越大；同時修改.perspective-r的高度值和.perspective-b的寬度值。</p><!--一個效果元素--><div class="perspective-outer"> <div class="perspective-r"></div> <div class="perspective-b"></div> </div><!--一個效果元素--><!--一個效果元素--><div class="perspective-outer"> <div class="perspective-r"></div> <div class="perspective-b"></div> </div><!--一個效果元素--><!--一個效果元素--><div class="perspective-outer"> <div class="perspective-r"></div> <div class="perspective-b"></div> </div><!--一個效果元素--><!--一個效果元素--><div class="perspective-outer"> <div class="perspective-r"></div> <div class="perspective-b"></div> </div><!--一個效果元素--></div><br clear="all" /><div class="test-3"><h2>測試效果-改變距離</h2><p>分別修改.perspective-r的border-left和.perspective-b的border-top的width值，值越大距離越大；增加.perspective-outer的寬度和高度值，並修改.perspective-r的寬度值和.perspective-b的高度值。</p><!--一個效果元素--><div class="perspective-outer"> <div class="perspective-r"></div> <div class="perspective-b"></div> </div><!--一個效果元素--><!--一個效果元素--><div class="perspective-outer"> <div class="perspective-r"></div> <div class="perspective-b"></div> </div><!--一個效果元素--><!--一個效果元素--><div class="perspective-outer"> <div class="perspective-r"></div> <div class="perspective-b"></div> </div><!--一個效果元素--><!--一個效果元素--><div class="perspective-outer"> <div class="perspective-r"></div> <div class="perspective-b"></div> </div><!--一個效果元素--></div></body></html>
提示：您可以先修改部分代碼再運行
