【分享】巧用CSS邊框 製作技能冷卻效果

　　上面的效果看起來還不錯吧。在網頁裡，除了用Flash，我們還是有不少方法可以實現它。

　　顯然這種效果不複雜，一張背景圖片，加上前面帶有透明度的多邊形圖層，在指令碼控制下就可以轉起來了。但問題在於用什麼方法來構建這個多邊形？

　　在IE下可以用VML，其他瀏覽器可以用Canvas等等。雖然行的通，但都不是最簡單的。仔細分析下，該效果本質就是若干個三角形拼接而成。而三角形，如果你熟悉CSS2的話，一定在哪個地方見過。。。

　　首先來看一個100*100尺寸的div，他有4條彩色的邊框：

 

　　當然，此時你看不出什麼。現在我們把div的邊框寬度設定成50px：

 

　　你發現什麼了？邊框與邊框之間的交界處正好是條斜線。現在我們把div的長寬都設定成0，並且試著改變每條邊的邊框寬度：

<style>
.demo3
{
    width: 0px;
    height: 0px;
    overflow: hidden;


    border-top: 20px red solid;
    border-right: 30px green solid;
    border-bottom: 40px blue solid;
    border-left: 50px #000 solid;
}
</style>
<div class="demo3"></div>

　　

 

　　我們對其上右下左分別設定了20 30 40 50px的邊框寬度，這時就是呈現出一個不規則的三角形了。我們還可以通過設定邊框顏色為transparent，讓指定的邊框隱藏掉（只指定一個方向上單獨的邊框是不會顯示出來的，至少要指定兩個相連的方向才能顯示出來，所以要把不該出現的方向上的設定成透明）。例如：

<style>
.demo4
{
    width: 0px;
    height: 0px;
    overflow: hidden;

    border-left: 50px #000 solid;
    border-top: 20px red solid;
    border-right: 0px green solid;
    border-bottom: 0px blue solid;
}
</style>
<div class="demo4"></div>

　　

 

　　但是我們只需其中一種顏色，所以要把另個邊框的顏色設定成透明。值得注意的是，IE6下邊框顏色不支援transparent值，始終顯示為黑色，所以需要用個hack針對ie6，用chroma濾鏡過濾掉黑色。（這一點感謝CSDN上的網友X!ao_f的支援！）

<style>
.BG5
{
    background: #CC9900;
}

.demo5
{
    width: 0px;
    height: 0px;
    overflow: hidden;

    filter: alpha(opacity=60);
    _filter: Chroma(color='black') alpha(opacity=60);
    opacity: 0.6;

    border-left: 50px #000 solid;
    border-top: 20px transparent solid;
    border-right: 0px green solid;
    border-bottom: 0px blue solid;
}
</style>

<div class="BG5">
        <div class="demo5"></div>
</div>

 

       如此一來，我們只需建立若干個div，通過設定其邊框來拼接成相應的多邊形。

    

       事實上我們可以利用邊框兩邊的三角形，這樣只需建立4個遮罩層。至於代碼如何寫，拿張草稿紙出來，在上面推算下就可以了。

       具體的頁面在這裡：

       http://www.etherdream.com/funnyscript/WarIcon/Perfect.html

       (2010/08/27)