上面的效果看起來還不錯吧。在網頁裡，除了用flash，我們還是有不少方法可以實現它。
顯然這種效果不複雜，一張背景，加上前面帶有透明度的多邊形圖層，在指令碼控制下就可以轉起來了。但問題在於用什麼方法來構建這個多邊形？
在ie下可以用vml，其他瀏覽器可以用canvas等等。雖然行的通，但都不是最簡單的。仔細分析下，該效果本質就是若干個三角形拼接而成。而三角形，如果你熟悉css2的話，一定在哪個地方見過。。。
首先來看乙個100*100尺寸的div，他有4條彩色的邊框：
當然，此時你看不出什麼。現在我們把div的邊框寬度設定成50px：
你發現什麼了？邊框與邊框之間的交界處正好是條斜線。現在我們把div的長寬都設定成0，並且試著改變每條邊的邊框寬度：
我們對其上右下左分別設定了20 30 40 50px的邊框寬度，這時就是呈現出乙個不規則的三角形了。我們還可以通過設定邊框顏色為transparent，讓指定的邊框隱藏掉（只指定乙個方向上單獨的邊框是不會顯示出來的，至少要指定兩個相連的方向才能顯示出來，所以要把不該出現的方向上的設定成透明）。例如：
但是我們只需其中一種顏色，所以要把另個邊框的顏色設定成透明。值得注意的是，ie6下邊框顏色不支援transparent值，始終顯示為黑色，所以需要用個hack針對ie6，用chroma濾鏡過濾掉黑色。（這一點感謝csdn上的網友x!ao_f的支援！）
如此一來，我們只需建立若干個div，通過設定其邊框來拼接成相應的多邊形。
事實上我們可以利用邊框兩邊的三角形，這樣只需建立4個遮罩層。至於**如何寫，拿張草稿紙出來，在上面推算下就可以了。
具體的頁面在這裡：
(2010/08/27)
製作技能冷卻特效
製作技能冷卻特效 利用兩張，一張帶有半透明蒙層，一張為原圖。原圖做進度圈旋轉效果 原圖做進度圈動作 ccprogresstimer progress ccprogresstimer create ccsprite create chains.png progress settype kccprogr...
多層邊框的css製作 火狐
mozilla moz outline css 有些時候我們在設計時，會把乙個圖形描兩次邊，而在網頁中，只有乙個border，在css 2中，有outline這個屬性的，但是ie6尚不支援。而在mozilla 中，我們完全擁有這個屬性outline 低版本不支援，在較高的版本中已經支援 這裡介紹的是...
純CSS製作滾動邊框閱讀視窗
外鏈轉存失敗,源站可能有防盜煉機制,建議將儲存下來直接上傳 img tmflnj2e 1579963792728 演示.gif class box span span span span class content what is scrollingh1 滾動 rolling 是一種結合了轉動 多半...