img border 圖片邊框

HTML 透過 <img> 標籤來插入圖片,而圖片除了單純的一張圖之外,也可以加入些邊框(img border)的美化,或者在圖片加入超連結時,更需要處理 img border,否則瀏覽器可能會自動加上超連結邊框,不是這麼好看。

例如下圖是一張含有超連結的圖片,在 IE 瀏覽器下呈現出藍色的邊框,為了避免這樣的情況,可以用 img border 屬性來處理。



HTML img border 語法範例

<img src="圖片網址" border="0">


同樣一張圖,我們將 border 設為 0 的情況,在 IE 瀏覽器下就不會有藍色的邊框出現。



img border 的更多變化

上面我們用 HTML 基本的 border 屬性來調整邊框,但其實還有更多款式的邊框可以使用,這裡稍微介紹一下 CSS 的 img border 設計,可以設計出實線、虛線、點點線 ... 等多種樣式,顏色也可以自由調整,很方便的。

CSS img border 語法設計範例

<img src="圖片網址" style="border:2px green dashed;">


呈現結果如



CSS 來制定 border 的時候,可以直接在 <img> 標籤內加入 style,此範例我們制定的樣式是 2px 粗、綠色且為虛線,CSS border-style 有非常多好用的樣式,例如 solid、dotted、double、groove、ridge、inset、outset ... 等,可以變化出各式各樣的 border

延伸閱讀
HTML img 圖片標籤
img href 圖片連結
CSS border-style 邊框樣式屬性介紹與範例
CSS border 屬性介紹與範列
© Copyright wibibi.com 網頁設計教學百科 基礎的網頁設計規劃、資料庫與程式設計 Since 2012