例如下圖是一張含有超連結的圖片,在 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 屬性介紹與範列