HTML <img> 標(biāo)簽的 border 屬性
定義和用法
<img> 標(biāo)簽的 border 屬性規(guī)定圖像周圍的邊框的寬度,就是說可以增加或去掉圖像的邊框。
注釋:默認(rèn)地,圖像是沒有邊框的(除非圖像在 a 元素內(nèi)部)。
瀏覽器通常會(huì)把代表超鏈接的圖像(例如包含在 <a> 標(biāo)簽中的圖像)顯示在兩個(gè)像素寬的邊框里面,以表示讀者可以通過選擇這個(gè)圖像來訪問相關(guān)聯(lián)的文檔。
使用 border 屬性和一個(gè)用像素表示的寬度值就可以去掉 (border="0") 或加寬圖像的邊框。
注意:該屬性在 HTML 4 和 XHTML 中也不再被推薦使用了,同樣是應(yīng)該被樣式所代替,但卻依然被流行瀏覽器很好地支持著。
實(shí)例
下面的 HTML 可以產(chǎn)生不同粗細(xì)的圖像邊框:
<html> <body> <a href="/index.html"> <img src="/i/eg_logo_w3school.gif"border="1"
/> </a> <br /> <a href="/index.html"> <img src="/i/eg_logo_w3school.gif"border="2"
/> </a> <br /> <a href="/index.html"> <img src="/i/eg_logo_w3school.gif"border="4"
/> </a> <br /> <a href="/index.html"> <img src="/i/eg_logo_w3school.gif"border="8"
/> </a> </body> </html>
瀏覽器支持
盡管不推薦使用 border 屬性,但是所有主流瀏覽器均支持該屬性。
提示和注釋
注釋:HTML 4.01 不推薦使用圖像的 "border" 屬性。在 XHTML 1.0 Strict DTD 和 HTML 5 中,不再支持該屬性。
兼容性注釋
不推薦使用 img 元素的 border 屬性;在 HTML 4.01 Strict 以及 XHTML 1.0 Strict DTD 中,不支持 img 元素的 border 屬性。
請使用 CSS 代替。
CSS 語法:<img style="border:5px solid black">
在我們的 CSS 教程中,您可以找到更多有關(guān) border 屬性 的細(xì)節(jié)。
語法
<img border="value" />
屬性值
值 | 描述 |
---|---|
pixels | 邊框的寬度,以像素為單位。 |
TIY 實(shí)例
- <img> 標(biāo)簽的 border 屬性
- 本例演示如何使用 <img> 標(biāo)簽的 border 屬性來改變圖像的邊框。
延伸閱讀:去掉圖像的邊框
通過在 <img> 標(biāo)簽中使用 border="0" 屬性,就可以把圖像超鏈接周圍的邊框去掉。對于某些圖像,尤其是那些圖像映射來說,沒有邊框可能會(huì)使頁面的外觀得到改善。而對于那些清楚地表示是指向其他圖像的鏈接按鈕,如果沒有邊框,圖像看上去可能會(huì)更好。
雖然去掉邊框不會(huì)降低文檔的可用性,但還是要多加小心。因?yàn)闆]有邊框就意味著去掉了一種非常常見的超鏈接視覺指示效果,這使得讀者可能不會(huì)像原來那么很容易就可以找到這些鏈接。瀏覽器通常會(huì)在鼠標(biāo)移動(dòng)到超鏈接圖像上的時(shí)候改變鼠標(biāo)指針的形狀,但是不能指望瀏覽器一定會(huì)這樣做,更不應(yīng)該讓用戶在沒有邊框的圖像上摸索,已找到那些隱藏的鏈接。
我們強(qiáng)烈推薦你在使用無邊框圖像時(shí),最好同時(shí)使用其他方法,以便你的讀者知道應(yīng)該在這些圖像上單擊。即使使用簡單的文字,也很難使文檔對于讀者來說具有更好的可訪問性。