如果想要幫圖片加上這樣的邊框特效有沒有什麼快速又簡單的方法呢？如果只是一張兩張圖片那用用繪圖軟體可以很快就搞定，可是如果今天...是想幫整個購物商城的圖片加上這樣的效果，一張一張圖片會讓人編輯到手軟吧！不用擔心！！今天要和各位介紹的這個Instant相簿特效，只要短短的幾秒鐘，敲敲鍵盤幫圖片加上class，就能快速的幫圖片們做出好看又花翹的特效唷！

使用效果：

 

使用教學：

Step 1：載入js檔

請先到Instant的官方網站下載所需要的檔案：instant.zip，解壓縮之後裡面可以找到一個instant.js，將此js檔載入網頁內。

Step 2：幫圖片加上class

最基本的用法只要幫圖片加上class="instant"就可以完成了。

    <img src="/img檔路徑/image.gif" alt="" class="instant" />
  

 

Step 3：加上更多class來產生更多元的效果

除了加入最基本的class="instant"之外，Instant特效還有許多可以設定的效果唷！使用的方法一樣是把img加入相對應的class就可以了。請參考一下列表

• 初始 class "instant"
  

           <img src="/img檔路徑/image.gif" alt="" class="instant" />
           

• 幫圖片加入陰影，並且可以用後面的數字來調整透明度：Shadow opacity class "ishadow" - min=0 max=100 default=33

       <img src="/img檔路徑/image.gif" alt="" class="instant ishadow50" />
       

  原始圖片	加入Instant特效ishadow

• 使用class：icolor來調整邊框顏色 - min=000000 max=ffffff default=f0f4ff

       <img src="/img檔路徑/image.gif" alt="" class="instant icolorC3D2E5" />
       

  原始圖片	加入Instant特效icolor

• 使用class：itiltleft 或 itiltnone 或 itiltright 來決定傾斜的方向。

       <img src="/img檔路徑/image.gif" alt="" class="instant itiltright" />
       

  原始圖片	加入Instant特效itiltright

• 加入class：noshading來把圖片陰影取消。

       <img src="/img檔路徑/image.gif" alt="" class="instant noshading" />
       

  原始圖片	加入Instant特效noshading

• 使用class：historical 可將邊框設為磨損風格。

       <img src="/img檔路徑/image.gif" alt="" class="instant historical" />
       

  原始圖片	加入Instant特效historical

• 使用class：nocorner 來幫圖片邊框加上圓角。

       <img src="/img檔路徑/image.gif" alt="" class="instant nocorner" />
       

  原始圖片	加入Instant特效nocorner

相關連結：

Instant官方網站：http://www.netzgesta.de/instant/