網頁設計時總是有許多考慮，而不得不為圖片元素加上框線處理，例如考量使用者互動與圖片互動時：像是滑鼠滑上、滑鼠按下時的效果;或是網頁版面設計時，或許是為了保留必須與文字一起排版的彈性、或許是考慮到無法掌握圖片內容、可能會出現網頁相同色彩的圖片，像是商業攝影圖片等，諸如以上種種狀況，都可能考慮到為圖片加上外框設計。

為圖片加上框線有幾種常見的作法，這邊先以白底網頁、配上淺色及深色的圖片作為范例討論：

1. 深色線條：最簡單的作法，不論圖片內容為何，都可以很快速的將圖片與白色背景分隔開來，但如果圖片背景為淺色時則因為對比過度強烈而得到反效果：

2. 淺色線條：為了不讓線框過度顯眼而搶去圖片主題，因此使用與白色接近的灰色線條作為框線，可以很適合的適應各種圖片。Facebook 采用的即為此種作法，在圖片內部加上1 像素、20% 透明度的黑色線條，因此線條本身還會帶有圖片本身的色彩。

3. 加上陰影：為圖片加上陰影可以快速的入圖片跳脫出來而讓平面的設計產生層次的立體感，但是在圖片沒有任何框線的時候加上陰影的效果并不是非常好。

4. 在圖片與線框之間加上間距：兼顧視覺效果與實用性的作法，可以很明確的將圖片與背景其他元素分別開來：

5. 在加上間距的線框外加上陰影：有點類似相紙的效果，仿真風格的設計常用的作法

相同的道理應用在黑色的網頁上的狀況如下：

當然，在黑色網頁上想要加上陰影是不切實際的作法，因此改為亮色的陰影、也就是光暈，這種較為強烈的視覺效果通常是用在滑鼠滑上等互動效果較為適合：

以上只是舉例幾種基本作法，當然像是框線還可以有各種色彩、粗細，間距也有不同寬度、切圓角等等的作法。

當然并不是每一種場合都必須為圖片加上框線，大多是必須與文字交互排版的情況下會比較需要。其他像是相簿網站、燈箱效果等就完全不需要為圖片加上線框(使用者也不希望如此)。就算是必須為圖片加上框，也會希望在保持版面一致性、不過度搶眼而造成反效果的前提下進行。

網站欄目：為圖片加框：幾種常用的作法與選擇
當前路徑：http://m.newbst.com/news41/162791.html

成都網站建設公司_創新互聯，為您提供網站建設、網站導航、網站設計、軟件開發、用戶體驗、定制開發

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯