HTML img border 圖片邊框設計

HTML img border 是用來設計圖片邊框的一種技巧，其實 border 是 CSS 內建的邊框設計屬性，不只是可以用在圖片，可以用在許多其它的網頁元素，例如 textarea、表格的邊框、input type= text、按鈕邊框 ... 等，今天這篇就來教各位如何運用 CSS border 屬性來替 HTML img 圖片增加邊框設計，對於網頁中的圖片呈現有很好的效果。

我們先來看看 CSS border 屬性的語法，再套用給 HTML img 看效果。

CSS border 屬性的語法
border: 邊框粗細 邊框顏色 邊框樣式;
關於 border 屬性的各個參數用法請參閱《CSS border 邊框設計》的詳細說明，我們根據 border 屬性的參數順序，依序把邊框的粗細、顏色以及樣式套用到圖片上就可以了，起看範例。

HTML img border 圖片邊框設計範例
這是藍色邊框的圖片<br>
<img src="範例圖片網址" style="border:2px blue solid;"><br><br>
這是紅色邊框的圖片<br>
<img src="範例圖片網址" style="border:2px red solid;"><br><br>
這是黑色虛線邊框的圖片<br>
<img src="範例圖片網址" style="border:2px black dashed;"><br><br>
範例的圖片邊框效果

這是藍色邊框的圖片


這是紅色邊框的圖片


這是黑色虛線邊框的圖片


我們在範例中準備了三張增加了邊框的圖片，其實圖片本身都是一樣的，可是增加邊框的視覺效果是不是讓整個看起來都不一樣了呢？這就是 CSS border 屬性的魔力，我們來看看範例語法，每個 img 標籤內都有一段 style 開頭的語法，那就是用來宣告 CSS 樣式用的，我們在 style 內寫了 border 屬性，分別給出藍色實線邊框、紅色實線邊框以及黑色虛線邊框，就像範例的輸出結果那樣。

以上就是 HTML img border 圖片邊框設計的基本概念，熟悉後就能創造出各式各樣的圖片邊框效果囉！關於 border 屬性的更多變化，請參閱《CSS border 邊框設計》篇的內容。

更多圖片設計技巧
© Copyright webtech.tw Since 2010