IT貓撲網(wǎng):您身邊最放心的安全下載站! 最新更新|軟件分類|軟件專題|手機(jī)版|論壇轉(zhuǎn)貼|軟件發(fā)布

您當(dāng)前所在位置:首頁網(wǎng)絡(luò)編程DIVCSS → 使用css實(shí)現(xiàn)透視的效果

使用css實(shí)現(xiàn)透視的效果

時(shí)間:2015/6/28來源:IT貓撲網(wǎng)作者:網(wǎng)管聯(lián)盟我要評(píng)論(0)

    今天萌發(fā)一個(gè)想法,用css來實(shí)現(xiàn)透視效果。起初,我想到的是我們常見的添加陰影效果的方法,用多個(gè)div通過偏移來實(shí)現(xiàn),但這需要很多 div,不夠理想。隨后,我想到css的一個(gè)屬性:border,在border相連接處可以產(chǎn)生對(duì)角線效果。這樣用兩個(gè)div就可以實(shí)現(xiàn),我們先看看 最終效果 ,然后再分析實(shí)現(xiàn)過程。

    首先,我們看看border如何生成的對(duì)角線效果,在你的html的頭部增加以下代碼,你就會(huì)看到 這樣的效果 。

以下為引用的內(nèi)容:

.border{width:0;height:0;border-width:50px;border-color:#f00 #0f0 #00f #000;border-style:solid;

    有了上面的基礎(chǔ),我們就可以用兩個(gè)額外的div來實(shí)現(xiàn)透視效果。

    一、html代碼如下:

以下為引用的內(nèi)容:

<div class="perspective-outer">
 <div class="perspective-r"></div>
 <div class="perspective-b"></div>
 <div class="perspective-inner">透視效果元素</div>
</div>
 

    二、Css代碼:

以下為引用的內(nèi)容:

.perspective-outer{
 position:relative;
 width:170px;/*要實(shí)現(xiàn)透視效果元素的寬度+透視距離*/
 height:140px;/*要實(shí)現(xiàn)透視效果元素的高度+透視距離*/
}
.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;/*要實(shí)現(xiàn)透視效果元素的高度(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;
}
 

    .perspective-outer定義高度和寬度,并相對(duì)定位,確保右邊和下邊的透視區(qū)域能定位的相應(yīng)的位置,高度值和寬度值為要實(shí)現(xiàn)透視效果元素的高度加上相應(yīng)的透視距離。.perspective-r只需設(shè)置高度值,其值為.perspective-outer的高度減去border-top,.perspective-b只需設(shè)置寬度值,其值為.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為父元素的背景顏色,我這里的測(cè)試頁面父元素為body,所以為白色。

    三、后記

    本文只是做一個(gè)簡(jiǎn)單得測(cè)試,其目的在于拋磚引玉。這種方法其實(shí)用性究竟有多大,咱姑且不論,但至少可以給我們一種解決問題的思路。希望此文能對(duì)你有所幫助。

關(guān)鍵詞標(biāo)簽:css

相關(guān)閱讀

文章評(píng)論
發(fā)表評(píng)論

熱門文章 DIV+CSS網(wǎng)頁布局常用的一些基礎(chǔ)知識(shí)整理DIV+CSS網(wǎng)頁布局常用的一些基礎(chǔ)知識(shí)整理

相關(guān)下載

人氣排行 DIV CSS完美兼容IE6/IE7/FF的通用方法CSS實(shí)例:list-style-type在IE與FF中奇怪的現(xiàn)象解析-CSS布局實(shí)例CSS實(shí)例:通過定義漸變邊框給圖片加陰影CSS常用技巧之一 禁止文字自動(dòng)換行解決用CSS控制DIV居中失效的問題網(wǎng)頁頁面設(shè)計(jì)中CSS十大注意css div設(shè)置float后高度不能自動(dòng)增加讓CSS兼容IE和Firefox的技巧集合