HTML <img> tag na may attribute na border

HTML <img> 标籤

Sample

Ang HTML na ito ay maaaring lumikha ng iba't ibang laki ng border ng imahe:

<html>
<body>
<a href="/index.html">
<img src="/i/eg_logo_codew3c.gif" border="1" />
</a>
<br />
<a href="/index.html">
<img src="/i/eg_logo_codew3c.gif" border="2" />
</a>
<br />
<a href="/index.html">
<img src="/i/eg_logo_codew3c.gif" border="4" />
</a>
<br />
<a href="/index.html">
<img src="/i/eg_logo_codew3c.gif" border="8" />
</a>
</body>
</html>

親自試試

定義和用法

<img> 标簽的 border 屬性規定圖像周圍的邊框的寬度，就是說可以增加或去掉圖像的邊框。

註釋：默認地，圖像沒有邊框的（除非圖像在 a 元素內部）。

瀏覽器通常會把代表超鏈接的圖像（例如包含在 <a> 标簽中的圖像）顯示在兩個像素寬的邊框內，以表示讀者可以通過選擇這個圖像來訪問相關聯的文件。

使用 border 屬性和一个用像素表示的寬度值就可以去掉 (border="0") 或加寬圖像的邊框。

注意：該屬性在 HTML 4 和 XHTML 中也不再被推薦使用了，同樣是應該被樣式所代替，但卻依然被流行瀏覽器很好地支持著。

อ่านเพิ่มเติม: ลบขอบรูปภาพ

瀏覽器支持

儘管不推薦使用 border 屬性，但是所有主流瀏覽器均支持該屬性。

提示和註釋

註釋：HTML 4.01 不推薦使用圖像的 "border" 屬性。在 XHTML 1.0 Strict DTD 和 HTML 5 中，不再支持該屬性。

提示：請使用 CSS 的邊框屬性 來改變元素的邊框樣式。您可以在一個外部樣式表中使用 CSS 邊框屬性，為站點上的所有圖像設置一貫的邊框。與為單獨一個圖像設置 border 屬性相比，這種方式無疑擁有更高的效率。

兼容性註釋

不推薦使用 img 元素的 border 屬性；在 HTML 4.01 Strict 以及 XHTML 1.0 Strict DTD 中，不支持 img 元素的 border 屬性。

請使用 CSS 代替。

CSS 語法：<img style="border:5px solid black">

CSS 實例：圖像邊框

在我們的 CSS 教學中，您可以找到更多有關 border 屬性 的細節。

語法

<img border="value" />

屬性值

值 描述
pixels 邊框的寬度，以像素為單位。

TIY 實例

<img> 标簽的 border 屬性
ตัวอย่างนี้แสดงว่าจะใช้คุณสมบัติ border ของแบตทิ้ง <img> ที่จะเปลี่ยนขอบรูปภาพ

อ่านเพิ่มเติม: ลบขอบรูปภาพ

ด้วยการใช้คุณสมบัติ border="0" ในแบตทิ้ง <img> จะสามารถลบขอบรอบลิงก์รูปภาพได้ สำหรับบางรูปภาพ โดยเฉพาะที่เป็นรูปแบบแผนที่รูปภาพ การไม่มีขอบอาจทำให้ลักษณะของเว็บเพิ่มมากขึ้น สำหรับปุ่มลิงก์ที่ชัดเจนว่ามีการนำไปสู่รูปภาพอื่นๆ โดยที่ไม่มีขอบอาจทำให้รูปภาพดูดีขึ้น

แม้ว่าการลบขอบจะไม่ลดความเข้าถึงของเอกสาร แต่ควรระมัดระวังมากยิ่งขึ้น เพราะไม่มีขอบหมายถึงการลบอาทิตย์ด้านที่มีตัวบอกเป็นที่แน่นอนว่าเป็นลิงก์ ซึ่งอาจทำให้ผู้อ่านหายากในการหาลิงก์เหล่านั้น โดยทั่วไปแล้วบราวเซอร์จะเปลี่ยนรูปแบบของตะวันเท้าเมื่อเคาน์เตอร์มองลงมายังรูปภาพของลิงก์ แต่ไม่ควรคาดหวังว่าบราวเซอร์จะทำเช่นนั้น และไม่ควรทำให้ผู้ใช้ต้องเริ่มเลือกในรูปภาพที่ไม่มีขอบเพื่อหาลิงก์ที่ซ่อนเร้น

เราแนะนำให้คุณใช้วิธีอื่นๆพร้อมกันเมื่อใช้รูปภาพที่ไม่มีขอบเพื่อให้ผู้อ่านของคุณรู้ว่าควรคลิกบนรูปภาพเหล่านั้น แม้แต่ใช้ข้อความเรียบง่ายก็ยังยากที่จะทำให้เอกสารมีความเข้าถึงง่ายต่อผู้อ่าน

HTML <img> 标籤